在 Javascript 中遍历嵌套数组时出错

Question

我正在循环访问对象数组并在表中显示结果。

renderProducts(){
return this.state.products.map((product, index) => (
<tr key={product.id}>
<td>{product.code}</td>
<td>{product.name}</td>
<td>{product.price}</td>
<td>{this.renderVariants(product.variants)}</td>
</tr>
))
}

现在，product.variants也是一个对象数组。所以我需要遍历数组并分配给一个变量。 这就是这个数组的样子，

variants: Array(2)
0: {color: "red,blue"}
1: {size: "m,39"}

我想遍历这个数组并像这样显示结果，Color - red, blue, Size - m, 39. 这就是我想做的——

renderVariants(variants){
if (variants != null && variants.length > 0) {
variants.map((variant, index)  => {
for(var key in variants) {
var color = variants[key].color;
var size = variants[key].size;
var message = color+size;
}
});
}else{
var message = 'null';
}
return message;
}

这只返回"null"，并返回颜色和大小的空。 我如何以我之前所说的方式显示结果。此外，例如，数组也可能如下所示：

variants: Array(1)
0: {size: "t,u"}

所以结果将是Size - t,u.在显示其值之前，如何检查大小、颜色是否存在？ 谢谢

Answer 1

更简单的方法可能是减少对象并将数组映射到如下所示的字符串。

let variants = [{color: "red,blue"}, {size: "m,39"}];
let result = variants.map(obj => 
Object.entries(obj).reduce((s,[key,val]) => s+=`${key[0].toUpperCase()+key.slice(1)} - ${val}`,'')); // creates a string of the required type
result = result.join(', ');
console.log(result);

renderVariants(variants){
return variants && variants.map(obj => 
Object.entries(obj).reduce((s,[key,val]) => s+=`${key[0].toUpperCase()+key.slice(1)} - ${val}`,'')).join(', ');
}

Answer 2

在 if 条件之外声明消息变量

renderVariants(variants){
var message = '';
if (variants != null && variants.length > 0) {
variants.map((variant, index)  => {
for(var key in variants) {
var color = variants[key].color;
var size = variants[key].size;
message = color+size;
}
});
}else{
var message = 'null';
}
return message;
}

Answer 3

您可以在数组上map，然后合并每个对象条目，然后加入数组

const variants = [{
color: "red,blue"
},
{
size: "m,39"
}
]
let v = variants.map(variant => Object.entries(variant).flat().join(' - ')).join(', ')
console.log(v)