如何將所有值放入數組並使用javascript獲取它們

Question

我在此鏈接中有我以前的問題

我要求將所有值放入數組並顯示為HTML。 他們反應很好，但是它只將一個值（zip1）顯示到數組中並將其轉換為HTML。

所以我想根據組號獲取所有值，例如zip1，zip2，距離，權重。

我嘗試過，但是答案沒有改變，我的代碼與以前的答案有所不同。

const array = [[{"loc":{}},{"distance":6.4},{"zip1":"06120"},{"zip2":"06095"},{"group":1},{"weight":1119}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":2},{"weight":41976}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":1},{"weight":41976}]];

const merged = array.map((r, a) =>{
  const { group } = a.find(n => n.group)
  const { zip1 } = a.find(n => n.zip1)
  r[group] = r[group] || []
  r[group].push({Zip1:zip1})
   const { zip2 } = a.find(n => n.zip2)
    r[group].push({Zip2:zip2})
     const { weight } = a.find(n => n.weight)
    r[group].push({weight:weight})
     const { distance } = a.find(n => n.distance)
    r[group].push({distance:distance})
  return r;
},{})
const output = document.getElementById('output');

Object.entries(merged).forEach(([group, zips]) => {
  const h1 = document.createElement('h1');
  h1.innerHTML = "group " + group

  const span = document.createElement('span');
  span.innerHTML = `Zip1 - ${zips.zip1},${zips.zip2},${zips.weight},${zips.distance} (in group - ${group})`;

  output.appendChild(h1)
  output.appendChild(span)
})

我的預期輸出（但我需要在google map infowindow中顯示此內容。我僅顯示示例內容）

Answer 1

方法

1. 將您的2D數組轉換為1D數組 ，因此將有對象而不是將數組作為內部項目。 這是通過arrToObj函數完成的
2. 將您的zip值從string轉換為array 。 這樣做是為了便於將來進行_concatenation。 通過zipToArr函數完成
3. 將對象數組分組到一個對象下 。 為此，我們提升 group密鑰，並將zip1/zip2與同一組中的其他對象連接在一起 。 參考grouper功能
4. 使用上一個聚合中的 Object.values 獲取分組的對象 。 我們已經有了group密鑰，因此我們不再需要父密鑰
5. 根據它們各自的鍵 將值格式化為HTML元素 。 由於我們將准備好元素，因此這將最終有助於生成HTML。 完成html和format功能
6. 通過迭代先前生成的數組來呈現HTML 。 在每次迭代中，創建一個容器div來容納組 。 容器將有助於樣式化其第一個元素 group

履行

 const array = [[{"loc":{}},{"distance":6.4},{"zip1":"06120"},{"zip2":"06095"},{"group":1},{"weight":1119}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":2},{"weight":41976}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":1},{"weight":41976}]]; // Data processing functions const arrToObj = arr => arr.reduce((a, c) => ({ ...a, ...c}), {}); const zipToArr = x => ({...x, zip1: [x.zip1], zip2: [x.zip2]}); const grouper = (a, c) => { delete c.loc; delete c.distance; if (a[c.group]) { a[c.group].zip1.push(...c.zip1); a[c.group].zip2.push(...c.zip2); return a; } else { return {...a, [c.group]: c} } }; // HTML utilities const html = (k, v) => { const it = document.createElement('p'); it.innerHTML = `${k} ${v}`; return it; } const format = g => Object.keys(g).sort().reduce((a, c) => ({...a, [c]: html(c, g[c])}), {}); // Actual processing const data = array.map(arrToObj).map(zipToArr).reduce(grouper, {}); const dataWithHTML = Object.values(data).map(format); // Rendering const display = document.getElementById('display'); dataWithHTML.forEach(it => { const container = document.createElement('div'); Object.values(it).forEach(v => container.appendChild(v)); display.appendChild(container); }); 

 p:first-of-type { font-size: 36px; font-weight: bold; margin: 0; } p { text-transform: capitalize; } 

 <div id="display"></div>