How to push all values into array and get them with javascript

Question

I have my previous question in this link my question

I asked to push all values into an array and show to the HTML. They responded well but it showing only one value(zip1) into an array and get them to HTML.

So i want to get that all values like zip1,zip2, distance, weight based on the group number.

I tried but answer not came my code altered from previous answer.

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)
})

My expected output(but I need to show this in google map infowindow.I just showing example content)

Answer 1

Methodology

1. Convert your 2D array into a 1D array , so instead of having arrays as inner items you will have objects . This is done through the arrToObj function
2. Convert your zip values from string to array . This is done to facilitate their _concatenation in the future. Done through the zipToArr function
3. Group your array of objects under one object . In order to do that we promote the group key and concatenate zip1/zip2 with other objects from the same group. Refer to the grouper function
4. Get the grouped objects using Object.values on the previous aggregate . We already have the group key in them so we don't need the parent key anymore
5. Format your values into HTML elements based on their respective keys . This will facilitate generating the HTML in the end since we'll have the elements ready. Done with html and format functions
6. Render your HTML by iterating on the previously generated array. In each iteration create a container div that will hold the group . The container will help styling its first element group

Implementation

 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>