將新值推送到物件陣列，同時保持舊值不變ReactJsNextJs

我有一個帶有影像名稱的 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"
        ]
    }
}

uj5u.com熱心網友回復：

Array.prototype.map()的輸出將再次是一個陣列。在您的情況下，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);

uj5u.com熱心網友回復：

您可以使用擴展運算子來完成此任務

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

這應該有效。

uj5u.com熱心網友回復：

@Amila Senadheera 提供的最佳解決方案。這種情況下使用map函式的迭代來符合所需的輸出物件。即使是正常作業，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);

uj5u.com熱心網友回復：

擴展運算子可用于向陣列添加值。

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

標籤：javascript 反应 下一个.js

上一篇：js將一個影像輸入值分配給另一個

下一篇：即使URL有效且API正常運行，Axios請求仍回傳404