JavaScript：對象的重組和數組

Question

我從 API 獲取數據，如下所示：

  desserts: [
    {
      name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"],
      calories: [159, 237, 109]
    },

我的組件（Vuetify Datatable）期望數據采用完全不同的形式，如下所示：

    desserts: [
    { name: "Frozen Yogurt", calories: 159},        
    { name: "Ice cream sandwich", calories: 237 },
     {name: "Egg", calories: 109 }
    ],

我無法解決它。 這（ 從兩個 arrays 創建一個 JavaScript Object ）看起來非常相似，但給出了不同的結果。 誰能幫我？

Answer 1

您可以使用Array#map中的 index 參數。 Array#flatMap可以使用，因此它適用於數組中的任意數量的對象。

 let arr = [ { name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"], calories: [159, 237, 109] } ]; let res = arr.flatMap(({name,calories}) => name.map((name,idx)=>({name,calories:calories[idx]}))); console.log(res);

Answer 2

您可以在每個 object 中進行一次迭代。 只要確保兩個 arrays 的長度相等：

 let desserts = [ { name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"], calories: [159, 237, 109] } ]; let list = []; for(let i = 0; i < desserts.length; i++){ let obj = desserts[i]; if(obj.name.length == obj.calories.length){ for(let i = 0; i < obj.name.length; i++){ list.push({name: obj.name[i], calories: obj.calories[i]}); } } } console.log(list);

Answer 3

您可以減少對象的條目和 map 找到的值以及作為對象的鍵。

此方法僅采用desserts數組中的第一個 object。

 const desserts = { name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"], calories: [159, 237, 109] }, result = Object.entries(desserts).reduce((r, [k, values]) => values.map((v, i) => ({...r[i], [k]: v })), []); console.log(result);

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

Answer 4

使用Array.prototype.reduce將每個項目展平為所需的結構

 const obj = { desserts: [{ name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"], calories: [159, 237, 109] }] }; const result = obj.desserts.reduce((acc, { name, calories }) => { Array.prototype.push.apply(acc, name.map((item, idx) => ({ name: item, calories: calories[idx] }))); return acc; }, []); console.log(result);

Answer 5

這是您可以執行的操作：

要將數據轉換為您想要的數據是這樣的：

const requiredOutput = [];
 
for(let instance of desserts){
  instance.name.forEach((name, index)=>{
    requiredOutput.push({
        name: name,
        calories: instance.calories[index]
    })
  })
}