根据属性值分隔值并使用javascript显示

Question

我有一个看起来像这样的数组：

var 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 }
]];

现在，我想根据在HTML中显示的属性值来获取数组的值。预期输出被拆分到具有"group“属性的数组中。我还需要在HTML中使用基于组进行存储，如下面的示例所示：

group 1:
  all zip1's under group 1
group 2:
  all zip1's under group 2 

我试着使用循环，但我没有得到正确的答案：

for (var k = 0; k < array.length; k++) {
    var array1 = array[k];    
    if (flag[array1[2]["zip1"]]) continue;
    flag[array1[2]["zip1"]] = true;
    output2.push(array1);
}

因此，请帮助我找到拆分的数组显示在HTML与组明智

​

​

Answer 1

使用reduce，您可以创建一个对象，其中每个group值作为键，一个zip1数组作为值，如下所示：

然后循环遍历Object.entries，以创建：

​

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.reduce((r, a) =>{
  const { group } = a.find(n => n.group)
  const { zip1 } = a.find(n => n.zip1)
  r[group] = r[group] || []
  r[group].push(zip1)
  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} (in group - ${group})`;
  
  output.appendChild(h1)
  output.appendChild(span)
})

<div id="output"></div>

​