根據條件在嵌套的JS陣列中插入新的JSON物件

對于我的電子商務應用程式要求之一，我有一個嵌套陣列（示例）：

const data = [
    {
        "id": 1,
        "group": "upper-wear",
        "labels": [
            {
                "type": "shirts",
                "quantity": "20",
            },
        ],
        popular: true
    },
    {
        "id": 2,
        "group": "bottom-wear",
        "lables": [
            {
                "type": "trousers",
                "quantity": "31",
            },
        ],
        popular: true
    },
]

對于這個陣列，如果組值等于“upper-wear”，我需要將新物件插入到陣列“labels”中。

const newDataToInsert = [
    {
      "type": 'blazers',
      "quantity": 19
    },
  ]

這是我到目前為止所嘗試的，考慮到現在我只需要插入單個標簽（即'上裝'）（將來，可以有多個標簽類別'上裝'，'下裝'，插入）：

const updatedArray = data.map((datum) => {
    if (datum.group === 'upper-wear') {
      return {
        ...datum,
        labels: [...datum.labels, ...newDataToInsert]
      };
    }
  });
  
  console.log(updatedArray);

但是似乎有一個愚蠢的問題我錯過了，因為結果回傳如下：

[
  {
    id: 1,
    group: 'upper-wear',
    labels: [ [Object], [Object] ],
    popular: true
  },
  undefined
]

我知道可能有更好的方法可用，但這是我目前認為的最低解決方案。

任何幫助解決當前或任何更好的解決方案將不勝感激。

uj5u.com熱心網友回復：

試試這個

updatedArray = data.map((d) => {
    if (d.group && d.group === 'upper-wear') {
        return { ...d, labels: d.labels.concat(newDataToInsert) }
    } else {
        return d;
    }
})

const data = [
{
    "id": 1,
    "group": "upper-wear",
    "labels": [
        {
            "type": "shirts",
            "quantity": "20",
        },
    ],
    popular: true
},
{
    "id": 2,
    "group": "bottom-wear",
    "lables": [
        {
            "type": "trousers",
            "quantity": "31",
        },
    ],
    popular: true
},
];

const newDataToInsert = [
{
  "type": 'blazers',
  "quantity": 19
},
  ];

const updatedArray = data.map((d) => {
if (d.group && d.group === 'upper-wear') {
    return { ...d, labels: d.labels.concat(newDataToInsert) }
} else {
    return d;
}
});
  console.log(updatedArray)

解釋

在這里，在映射 時data，我們檢查條件

如果

• 如果匹配，我們將首先從變數中復制整個物件b return { ...b }
• 之后我們取另一個同名變數lables return { ...d, labels: d.labels.concat(newDataToInsert) }，根據 JSON 默認性質，同名的新變數將保存最新值
• 在標簽中，我們首先獲取舊資料的副本，然后將其與newDataToInsert陣列合并labels: d.labels.concat(newDataToInsert)，它將合并 2 個陣列并將它們存盤在 JSON 中，名稱為labels

別的

• 在 else 我們只回傳當前值 else { return d; }

uj5u.com熱心網友回復：

您不會從地圖中回傳所有物件。只有滿足您的條件時，您才會回傳結果。這會導致您未定義的物件...

const data = [
    { "id": 1, "group": "upper-wear", "labels": [ { "type": "shirts", "quantity": "20", }, ], popular: true },
    { "id": 2, "group": "bottom-wear", "lables": [ { "type": "trousers", "quantity": "31", }, ], popular: true },
]

const newDataToInsert = [ { "type": 'blazers',"quantity": 19 }, ]

const updatedArray = data.map(datum => { 
    if (datum.group === 'upper-wear') datum.labels = [...datum.labels,  ...newDataToInsert]
    return datum     
});
  
console.log(updatedArray);

uj5u.com熱心網友回復：

您實際上不需要遍歷map陣列。只需在陣列中找到一個物件并更改您想要的。

const data=[{id:1,group:"upper-wear",labels:[{type:"shirts",quantity:"20"}],popular:true},{id:2,group:"bottom-wear",lables:[{type:"trousers",quantity:"31"}],popular:true}];
const newDataToInsert=[{type:"blazers",quantity:19}];

data.find(({ group }) => group === 'upper-wear')?.labels.push(...newDataToInsert);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

標籤：javascript 数组 嵌套的

上一篇：useEffect不更新函式呼叫的變數

下一篇：反應應用程式如何僅顯示有限數量的陣列項