根据属性值分隔值并使用javascript显示 [英] Seperate values based on property value and show with javascript

问题描述

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

I have an array that looks like this:

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存储，如下例所示：

Now I want to take the array values based on the property values for show in HTML. Expected output is split into array with "group" property. I also need to store in HTML with based on group, as shown in the example below:

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

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

I tried using a loop but I didn't manage to get the right answer:

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中拆分数组显示

So help me to find split the array show in HTML with group wise

推荐答案

使用 reduce ，您可以创建一个对象，其中每个 group 值作为键，并包含一个 zip1 这样的值：

Using reduce, you can create an object with each group value as key and an array of zip1 as values like this:

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

Then loop through the Object.entries, to create the HTML:

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>

这篇关于根据属性值分隔值并使用javascript显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！