将新值推送到对象数组，同时保持旧值不变 React Js Next Js

Question

我有一个包含图像名称的 JSON 文件。我想将数据存储在键值对象中。我正在使用正则表达式创建密钥以删除 -img[image No]。我无法将所有图像名称存储在数组中。当我添加一个新元素时，它会将其覆盖为以前的值。

如何在不清除以前存储的数据的情况下将新数据推送到数组中？

数据文件

[
    "apple-img1",
    "apple-img2",
    "apple-img3",
    "apple-img4",
    "apple-img5",
    "dell-img1",
    "dell-img2",
    "dell-img3",
    "hp-img1",
    "hp-img2"
]

我的代码

content.map((contentInfo) => {
  let key = contentInfo.replace(/-img\d$/, "") //Return Company Name without -i{Digit} For Example apple-img1 whould be apple
  let imgName = contentInfo //Name of the Image
            
  data[key] = {
      Images: imgName //Append New Image 2 Array Instead of OverWriting Them
  }
  console.log(data);
})

当前输出

{
    "apple": {
        "Images": [
            "apple-img5"
        ]
    },
    "dell": {
        "Images": [
            "dell-img3"
        ]
    },
    "hp": {
        "Images": [ 
            "hp-img2"
        ]
    }
}

预期输出

{
    "apple": {
        "Images": [
            "apple-img1",
            "apple-img2",
            "apple-img3",
            "apple-img4",
            "apple-img5"
        ]
    },
    "dell": {
        "Images": [
            "dell-img1",
            "dell-img2",
            "dell-img3"
        ]
    },
    "hp": {
        "Images": [ 
            "hp-img1",
            "hp-img2"
        ]
    }
}

Answer 1

您可以使用展开运算符来完成此任务

content.map((contentInfo) => {
            let key = contentInfo.replace(/-img\d$/, "") //Return Company Name without -i{Digit} For Example apple-img1 whould be apple
            let imgName = contentInfo //Name of the Image
            
            data = {
               Images: {...imgName, key} //Append New Image 2 Array Instead of OverWriting Them
            }
            console.log(data);
})

这应该有效。

Answer 2

扩展运算符可用于将值添加到数组。

content.map((contentInfo) => {
  let key = contentInfo.replace(/-img\d$/, ''); //Return Company Name without -i{Digit} For Example apple-img1 whould be apple
  let imgName = contentInfo; //Name of the Image
  if (data[key] == undefined) {
    data[key] = {
      Images: [imgName],
    };
  } else {
    data[key] = {
      Images: [...data[key].Images, imgName], //Append New Image 2 Array Instead of OverWriting Them
    };
  }
  console.log(data);
});

Answer 3

Array.prototype.map() will again be an array. In your case, Array.prototype.reduce()的输出是实现它的理想函数：

const data = [
  "apple-img1",
  "apple-img2",
  "apple-img3",
  "apple-img4",
  "apple-img5",
  "dell-img1",
  "dell-img2",
  "dell-img3",
  "hp-img1",
  "hp-img2",
];

const output = data.reduce((prev, curr) => {
  // get the keyname
  const [keyName] = curr.split("-");
  if (prev[keyName]) {
    // If the property exists then push to Images array
    prev[keyName].Images.push(curr);
  } else {
    // If the property name does not exist,
    // create it and add the initial value in the format you want
    prev[keyName] = { Images: [curr] };
  }
  return prev;
}, {});

console.log(output);

Answer 4

@Amila Senadheera 提供的最佳解决方案。本例使用 map 函数的迭代来符合所需的输出对象。即使 ist 工作，map 函数的输出数组也没有被使用。

 const content = [
        "apple-img1",
        "apple-img2",
        "apple-img3",
        "apple-img4",
        "apple-img5",
        "dell-img1",
        "dell-img2",
        "dell-img3",
        "hp-img1",
        "hp-img2"
    ]

    let data = {}
    content.map((contentInfo) => {
      let key = contentInfo.replace(/-img\d$/, "") 
      let imgName = contentInfo //Name of the Image
      data[key] = {
          Images: data[key] ? [...data[key].Images, imgName] : [imgName]  //Append New Image 2 Array Instead of OverWriting Them
      }
    })
console.log(data);

将新值推送到对象数组，同时保持旧值不变 React Js Next Js

Pushing New value to Array of Objects while keeping old one intact React Js Next Js

javascript

reactjs

next.js