循環內循環lodash

Question

我有一個數組如何建立像這樣：

"list": [
    {
        "insideList": [{"code": "0", "image": "./images/1"},
                    {"code": "1", "image": "./images/2"},
                    {"code": "2", "image": "./images/3"}],
        "bucket": "info",
        "instructions": "first set".\n",
        "color": "rgb(242, 242, 140)",
        "id": "a",
        "text": "first quest"
    },
   ...

我正在嘗試用lodash將此列表弄平，但是當第一張地圖也可以執行操作時，我不知道如何在地圖內部進行映射。 我為外循環所做的：

var withIndex = _.map(list,(item, i) => ({

      [`iv_${i}_text`]: item.text,
      [`iv_${i}_instructions`]: item.instructions,
      [`iv_${i}_color`]: item.color,
      [`iv_${i}_id`]: item.id,
      [`iv_${i}_bucket`]: item.bucket,
    }));

但是現在我想在“方面”列表上添加內部循環並構建如下所示的內容：

 var withIndex = _.map(list,(item, i) => ({
  [`iv_${i}_text`]: item.text,
  [`iv_${i}_instructions`]: item.instructions,
  [`iv_${i}_color`]: item.color,
  [`iv_${i}_id`]: item.id,
  [`iv_${i}_bucket`]: item.bucket,
  [`iv_${i}_a_0_code`]: item.insideList[0].code,       
  [`iv_${i}_a_0_image`]: item.insideList[0].image,  
  [`iv_${i}_a_1_code`]: item.insideList[1].code,       
  [`iv_${i}_a_1_image`]: item.insideList[1].image,
  [`iv_${i}_a_2_code`]: item.insideList[2].code,       
  [`iv_${i}_a_2_image`]: item.insideList[2].image
}));

可以使用lodash做這樣的事情嗎？

var withIndex = _.map(list,(item, i) => ({
      [`iv_${i}_text`]: item.text,
      [`iv_${i}_instructions`]: item.instructions,
      [`iv_${i}_color`]: item.color,
      [`iv_${i}_id`]: item.id,
      [`iv_${i}_bucket`]: item.bucket,

在這里再做一張地圖：

 _map(insideLoop, (item, j)=> ({
      [`iv_${i}_a_{j}_code`]: item.insideList[0].code,       
      [`iv_${i}_a_{j}_image`]: item.insideList[0].image,  
      [`iv_${i}_a_{j}_code`]: item.insideList[1].code,       
      [`iv_${i}_a_{j}_image`]: item.insideList[1].image,
      [`iv_${i}_a_{j}_code`]: item.insideList[2].code,       
      [`iv_${i}_a_{j}_image`]: item.insideList[2].image
    }));

Answer 1

減少（累加）對象屬性應該可以解決問題，然后合並兩個對象：

var withIndex = _.map(list, (item, i) => _.assign(
  {
    [`iv_${i}_text`]: item.text,
    [`iv_${i}_instructions`]: item.instructions,
    [`iv_${i}_color`]: item.color,
    [`iv_${i}_id`]: item.id,
    [`iv_${i}_bucket`]: item.bucket,
  },
  _.reduce(item.insideList, (acc, x, j) => {
    acc[`iv_${i}_a_${j}_code`]: x.code
    acc[`iv_${i}_a_${j}_image`]: x.image
    return acc
  }, {})
));

另外，您根本不需要lodash （本機函數更快）：

var withIndex = list.map((item, i) => Object.assign(
  {
    [`iv_${i}_text`]: item.text,
    [`iv_${i}_instructions`]: item.instructions,
    [`iv_${i}_color`]: item.color,
    [`iv_${i}_id`]: item.id,
    [`iv_${i}_bucket`]: item.bucket,
  },
  item.insideList.reduce((acc, x, j) => {
    acc[`iv_${i}_a_${j}_code`]: x.code
    acc[`iv_${i}_a_${j}_image`]: x.image
    return acc
  }, {})
));