在嵌套地图中设置索引值

发布时间:2020-07-06 03:46

我在嵌套地图中设置值时遇到问题,分配的值仅采用最后一个索引值。是我做错了还是想念吗?谢谢

这是我的数据:

const items = [{
  id: 'item1'
}, {
  id: 'item2'
}]

const itemDetails = [{
  name: 'data A',
  class: 'A'
}, {
  name: 'data B',
  class: 'B'
}, {
  name: 'data C',
  class: 'C'
}]

我期望的结果是:

[ 
  [
    { name: 'data A', class: 'A', itemIndex: 0, itemId: 'item1' },
    { name: 'data B', class: 'B', itemIndex: 0, itemId: 'item1' },
    { name: 'data C', class: 'C', itemIndex: 0, itemId: 'item1' }
  ],
  [
    { name: 'data A', class: 'A', itemIndex: 1, itemId: 'item2' },
    { name: 'data B', class: 'B', itemIndex: 1, itemId: 'item2' },
    { name: 'data C', class: 'C', itemIndex: 1, itemId: 'item2' }
  ]
]

但是我使用嵌套地图得到了这个结果:

[
  [
    { name: 'data A', class: 'A', itemIndex: 1, itemId: 'item2' },
    { name: 'data B', class: 'B', itemIndex: 1, itemId: 'item2' },
    { name: 'data C', class: 'C', itemIndex: 1, itemId: 'item2' }
  ],
  [
    { name: 'data A', class: 'A', itemIndex: 1, itemId: 'item2' },
    { name: 'data B', class: 'B', itemIndex: 1, itemId: 'item2' },
    { name: 'data C', class: 'C', itemIndex: 1, itemId: 'item2' }
  ]
]

我的代码:

const result = items.map((item, itemIdx) => {
  return itemDetails.map(detail => {
    detail.itemIndex = itemIdx
    detail.itemId = item.id

    return detail
  })
})
回答1

更少的代码:

const result = items.map((item, itemIndex) => 
  itemDetails.map(detail => ({...detail, itemIndex, itemId: item.id})))
回答2

请先创建原始细节的副本,然后对其进行变异。

这应该可以正常工作:

const result = items.map((item, itemIdx) => {
  return itemDetails.map(detail => {
    const newDetail = {...detail}
    newDetail.itemIndex = itemIdx
    newDetail.itemId = item.id

    return newDetail;
  })
})
回答3
var resArr=[];
// I am using .length in loops if your data is large you can precalculate the values  // intovariables and use them
for(var i=0;i<items.length;i++){
    const id = items[i]["id"];
    var temparr=[]
    for(var j=0;j<itemDetails.length;j++){
        let obj={"name":itemDetails[j]["name"],"class":itemDetails[j]["class"],"itemIndex":i,"itemId":id}
        temparr.push(obj);}
    resArr.push(temparr)
}

console.log(resArr);