Отдельные значения основаны на значении свойства и отображаются с помощью 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, чтобы создать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>