Question

我有这组颜色数组["#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进行第一次循环？

Answer 1

<强> 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>

Answer 2

你可以简单地使用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"]
        }
    }

使用forEach es6将对象数组添加到对象数组中

2 个答案: