我有这组颜色数组["#c4b18f", "#100f5c"]
我希望添加到每个摄像头,但摄像头是一个嵌套数组,如此
[
{
"id": 1,
"date": "Sat",
"cameras": [
{
"name": "East Gate",
"total_count": 233
},
{
"name": "South Gate",
"total_count": 2599
}
]
},
{
"id": 2,
"date": "Sun",
"cameras": [
{
"name": "East Gate",
"total_count": 123342
},
{
"name": "South Gate",
"total_count": 2333
}
]
}
]
我已经尝试了但是我得到了未定义的
const result = data.forEach(obj => ({
...obj,
cameras: obj.cameras.map((obj2, i) => ({
...obj2,
color: colors[i]
}))
}))
我怀疑我忘记了回复的东西,或者我应该使用map代替forEach进行第一次循环?
答案 0 :(得分:0)
<强> Array.map 强>
您可以使用Array.map()
迭代每个元素并返回一个新数组。
map()方法创建一个新数组,其结果是在调用数组中的每个元素上调用提供的函数。
在下面的示例中,我们两次调用 map() 。一次是对象数组(天),然后每次我们找到一个摄像机数组。
let addColors = (days, colors) => days.map(o => {
o.cameras = o.cameras.map( (c, i) => {
c.colors = colors[i%colors.length];
return c;
});
return o;
});
如果我有3种颜色或更多颜色,这个解决方案会起作用吗?
通过更改此行c.colors = colors[i%colors.length];
它可以使用Remainder (%)运算符。对于每个摄像机,它将索引除以颜色数,并使用余数作为颜色数组的索引。
这有点难以解释。
相机看起来像这样:
"cameras": [{
"name": "East Gate",
"total_count": 123342
},
{
"name": "South Gate",
"total_count": 2333
}
]
东门相机的索引为0
,南门相机的索引为1
。所以我们将0除以颜色数量(我更改了示例,因此我们有7个摄像头)。它进入0,0次没有余数。因此,我们选择colors[0]
red
。接下来,我们将1除以7.它进入1,0次并且余数为1.因此我们选择colors[1]
orange
。对于每组摄像机,这可以继续。如果摄像机的数量比颜色的数量长,那么颜色选择将开始重复。
我扩展了下面的示例,以显示当您拥有更多相机而不是颜色时会发生什么。
可运行示例
let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
let foo = [{
"id": 1,
"date": "Sat",
"cameras": [{
"name": "East Gate",
"total_count": 233
},
{
"name": "South Gate",
"total_count": 2599
}
]
},
{
"id": 2,
"date": "Sun",
"cameras": [{
"name": "East Gate",
"total_count": 123342
},
{
"name": "South Gate",
"total_count": 2333
},
{
"name": "North Gate",
"total_count": 2234
},
{
"name": "West Gate",
"total_count": 2234
},
{
"name": "North West Gate",
"total_count": 2234
},
{
"name": "North East Gate",
"total_count": 2234
},
{
"name": "South West Gate",
"total_count": 2234
},
{
"name": "South East Gate",
"total_count": 2234
}
]
}
];
let addColors = (days, colors) => days.map(o => {
o.cameras = o.cameras.map( (c, i) => {
c.colors = colors[i%colors.length];
return c;
});
return o;
});
document.querySelector('pre').innerHTML = JSON.stringify(addColors(foo, colors), null, 2);
<pre></pre>
答案 1 :(得分:0)
你可以简单地使用for循环。以下代码将有所帮助。让arr成为初始数组。
for(var j=0;j<2;j++){
var cameras = arr[j]["cameras"];
for(var i=0;i<2;i++){
cameras[i]["color"]=["#c4b18f", "#100f5c"]
}
}