Как поместить все значения в массив и получить их с помощью JavaScript

Question

У меня есть предыдущий вопрос по этой ссылке мой вопрос

Я попросил поместить все значения в массив и показать в HTML.Они хорошо отреагировали, но в массиве было показано только одно значение (zip1), и они были переведены в HTML.

Поэтому я хочу получить все значения, такие как zip1, zip2, distance, weight, основанные на номере группы.

Я пытался, но ответ не пришел, мой код изменился по сравнению с предыдущим ответом.

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. Я просто показываю пример содержимого)

Answer 1

Методология

1. Преобразование вашего 2D-массива в 1D-массив , поэтому вместо использования массивов в качестве внутренних элементов у вас будет объектов .Это делается с помощью функции arrToObj
2. . Преобразуйте значения zip из string в array .Это сделано для облегчения их _конкатенации в будущем.Выполнено с помощью функции zipToArr
3. Сгруппируйте массив объектов в один объект .Для этого мы продвигаем ключ group и объединяем zip1/zip2 с другими объектами из той же группы.Обратитесь к функции grouper
4. Получите сгруппированные объекты , используя Object.values на предыдущем агрегате .У нас уже есть ключ group, поэтому нам больше не нужен ключ parent
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>