[Solved] Populate heading each row in JavaScript

by


Basically, what you’re trying to do is group your data by group property, and then form some HTML out of it.

Grouping is easy, then just use whatever language you’re comfortable with to build the html:

const list = [{
    'name': 'Display',
    'group': 'Technical details',
    'id': '60',
    'value': 'Something'
  },
  {
    'name': 'Manufacturer',
    'group': 'Manufacturer',
    'id': '58',
    'value': 'Apple'
  },
  {
    'name': 'OS',
    'group': 'Technical details',
    'id': '37',
    'value': 'Apple iOS'
  }
];

const grouped = list.reduce( (acc,i) => ({
  ...acc,
  [i.group]: (acc[i.group] ? [...acc[i.group], i] : [i])
}),{})

Object.entries(grouped).forEach( ([heading,values]) => {
  console.log(heading)
  values.forEach( ({name,value}) => {
    console.log("\t",name,"=",value)
  })
})

1

solved Populate heading each row in JavaScript