如何將 map 對象數組轉換為新數組

Question

如何將 map 對象數組轉換為新數組

從一些 API 我得到這樣的回應：

[
  {
    name: line1,
    values: [
      { clock: clock1, value: value1 },
      { clock: clock2, value: value2 },
      { clock: clock3, value: value3 },
      { clock: clock4, value: value4 }
    ]
  },
  {
    name: line2,
    values: [
      { clock: clock1, value: value5 },
      { clock: clock2, value: value6 },
      { clock: clock4, value: value7 }
    ]
  },
  {
    name: line3,
    values: [
      { clock: clock1, value: value8 },
      { clock: clock4, value: value9 }
    ]
  },
  {
    name: line4,
    values: [
      { clock: clock1, value: value10 },
      { clock: clock2, value: value11 },
      { clock: clock3, value: value12 },
      { clock: clock4, value: value13 },
      { clock: clock5, value: value14 }
    ]
  }
]

所有clock: *屬性值在所有對象之間都相同，因此來自line1的clock1等於來自line2/3/4的clock1 。 但是值屬性並不相等。

出於我的目的，我需要將所有行中的值對象合並到這個新的對象數組中：

[
  { clock: clock1, line1: value1, line2: value5, line3: value8, line4: value10 },
  { clock: clock2, line1: value2, line2: value6, line3: null,   line4: value11 },
  { clock: clock3, line1: value3, line2: null,   line3: null,   line4: value12 },
  { clock: clock4, line1: value4, line2: value7, line3: value9, line4: value13 },
  { clock: clock5, line1: null,   line2: null,   line3: null,   line4: value14 }
]

新對象中的鍵必須是原始對象的名稱屬性。

有沒有辦法做那件事？

Answer 1

你可以試試我的代碼：

let arr = [
    {
      name: "line1",
      values: [
        { clock: "clock1", value: "value1" },
        { clock: "clock2", value: "value2" },
        { clock: "clock3", value: "value3" },
        { clock: "clock4", value: "value4" }
      ]
    },
    {
      name: "line2",
      values: [
        { clock: "clock1", value: "value5" },
        { clock: "clock2", value: "value6" },
        { clock: "clock4", value: "value7" }
      ]
    },
    {
      name: "line3",
      values: [
        { clock: "clock1", value: "value8" },
        { clock: "clock4", value: "value9" }
      ]
    },
    {
      name: "line4",
      values: [
        { clock: "clock1", value: "value10" },
        { clock: "clock2", value: "value11" },
        { clock: "clock3", value: "value12" },
        { clock: "clock4", value: "value13" },
        { clock: "clock5", value: "value14" },
      ]
    }
  ],
  data = []

for (let i = 1; i <= 5; i++) {
  let obj = { clock: "clock" + i}
  arr.map((line) => {
    let clock = line.values.find(v => v.clock == "clock" + i)
    obj[line.name] = clock ? clock.value : null
  })
  data.push(obj)
}
console.log(data)

Answer 2

您可以嘗試使用一個稱為散列的概念，這會將您的值與clock值捆綁在一起。

   var hash = {};
   temp1.map((t0)=>{
       t0.values.map((t1)=>{
           if(hash[t1.clock]){
              hash[t1.clock][t0.name] = t1.value
           } else {
               hash[t1.clock] = {}
               hash[t1.clock][t0.name] = t1.value
           }
       })
   })

在您擁有 hash 的值之后，您現在可以輕松地按照您想要的方式更改它，所以假設您想要更改您提到的 object 中的 hash

   var clocks = []
   for(var key in hash){
       var newClockObj = {}    
       newClockObj['clock'] = key;
       for(var clockKey in hash[key]){
           newClockObj[clockKey] = hash[key][clockKey];
       }
       clocks.push(newClockObj)
   }

Answer 3

我懷疑對象的二維數組會容易得多，但是如果你真的需要這樣做，那么你可以遍歷這些行並為每一行創建新的鍵。 在下面的示例中，我將我的輸入數組稱為“數據”。 您還可以在此處查看現場示例

// store the longest set of values in the list as this seems to be what you want the
// object sizes to be.
let maxSize = Math.max.apply(Math, data.map(line => { return line.values.length }))

// create a new list to store the objects we'll create
let newList = [];

// loop through each line and insert it's values with the key corresponding to the line name.
data.forEach(line => {
    // loop through the values for this line
  for (i=0; i < maxSize; i++) {
    // handle case where we need to add more arrays to our list
    if (newList.length <= i) newList.push({});
    // check if this value exists or if we are just need to append null
    if (i < line.values.length) {
    newList[i][line.name] = line.values[i][Object.keys(line.values[i])[0]]
    } else { newList[i][line.name] = null }
  }
});

Answer 4

這個沒有優化，但它適用於您格式的所有數據

let width = [];
let depth = [];
let result = [];

data.forEach(d => {
    if (width.indexOf(d.name) == -1) {
        width.push(d.name);
    }

    d.values.forEach(v => {
        if (depth.indexOf(v.clock) == -1) {
            depth.push(v.clock);
        }
    })
})

depth.forEach(d => {
    let temp = {
        clock: d
    };
    width.forEach(w => {
        temp[w] = null;
        data.forEach(dt => {
            if (dt.name == w) {
                dt.values.forEach(v => {
                    if (v.clock == d) {
                        temp[w] = v.value;
                    }
                })
            }
        })
    })

    result.push(temp);
})

console.log(result);

結果

[
  {
    clock: 'clock1',
    line1: 'value1',
    line2: 'value5',
    line3: 'value8',
    line4: 'value10'
  },
  {
    clock: 'clock2',
    line1: 'value2',
    line2: 'value6',
    line3: null,
    line4: 'value11'
  },
  {
    clock: 'clock3',
    line1: 'value3',
    line2: null,
    line3: null,
    line4: 'value12'
  },
  {
    clock: 'clock4',
    line1: 'value4',
    line2: 'value7',
    line3: 'value9',
    line4: 'value13'
  },
  {
    clock: 'clock5',
    line1: null,
    line2: null,
    line3: null,
    line4: 'value14'
  }
]

Answer 5

使用forEach迭代數組及其值並構建res object。首先將empty object 設為默認值 null。

 const convert = (data) => { const empty = Object.fromEntries(data.map(({name}) => [name, null])); const res = {}; data.forEach(({ name, values }) => { values.forEach(({ clock, value }) => { Object.assign(res[clock] = res[clock] || {...empty}, { clock, [name]: value, }); }); }); return Object.values(res); }; const data = [ { name: "line1", values: [ { clock: "clock1", value: "value1" }, { clock: "clock2", value: "value2" }, { clock: "clock3", value: "value3" }, { clock: "clock4", value: "value4" }, ], }, { name: "line2", values: [ { clock: "clock1", value: "value5" }, { clock: "clock2", value: "value6" }, { clock: "clock4", value: "value7" }, ], }, { name: "line3", values: [ { clock: "clock1", value: "value8" }, { clock: "clock4", value: "value9" }, ], }, { name: "line4", values: [ { clock: "clock1", value: "value10" }, { clock: "clock2", value: "value11" }, { clock: "clock3", value: "value12" }, { clock: "clock4", value: "value13" }, { clock: "clock5", value: "value14" }, ], }, ]; console.log(convert(data));