根据条件将新的JSON对象插入嵌套的JS数组中

Question

对于我的电子商务应用程序要求之一，我有一个表单的嵌套数组（示例）：

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') {
      return {
        ...datum,
        labels: [...datum.labels, ...newDataToInsert]
      };
    }
  });
  
  console.log(updatedArray);

但是，由于结果返回，我似乎缺少一个愚蠢的问题：

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

我知道可能有更好的方法，但这是我现在可以认为的最低解决方案。

任何帮助解决当前或任何更好解决方案的帮助都将受到高度赞赏。

Answer 1

尝试用这个

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)

解释

这里在映射数据时，我们检查条件

IF

• 如果匹配，那么我们将首先从变量复制整个对象>b return { ...b }
• 之后我们采用另一个同名变量 lables return { ...d, labels: d.labels.concat(newDataToInsert) },根据 JSON 默认性质，同名的新变量将保存最新值，
• 在标签中，我们首先获取旧数据的副本，然后将其与 newDataToInsert 数组合并< code>labels: d.labels.concat(newDataToInsert)，它将合并 2 个数组并将它们存储在 JSON 中，名称为 labels

Else

• 在 else 中我们只是返回当前值<代码> else { 返回 d; }

Answer 2

您实际上不需要使用 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; }

Answer 3

您不会返回地图中的所有对象。仅当满足您的条件时您才会返回结果。这会导致您未定义的对象......

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);

Answer 4

您可以使用 Array#find 来定位所需的组，然后更改找到的组的标签。有两个选项，具体取决于您要插入的项目数量。使用Array#push添加想要的项目；对多个项目使用 forEach：

const searchgroup = "upper-wear";
const target = data.find(({group}) => group === searchgroup);
target.labels.push(...newDataToInsert); //For one item to insert
//newDataToInsert.forEach(label => target.labels.push( label )); //For more than one item

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}];

//group to find
const searchgroup = "upper-wear";
//target element in data
const target = data.find(({group}) => group === searchgroup);
//check if group was found
if( target ) {
    //if there's only one product in newDataToInsert us this:
    //target.labels.push(...newDataToInsert);

    //if you have more than one product to be inserted use this; also works for one
    newDataToInsert.forEach(label => target.labels.push( label ));
} else {
    console.log( `No such group found: ${searchgroup}!` );
}

console.log( data );