时间戳

首页 > 解决方案 > 在 JavaScript 中填充每一行的标题

javascript - 在 JavaScript 中填充每一行的标题

问题描述

如何在 JavaScript 方法中先填充标题然后再填充行？我无法控制这些数据，这就是为什么我试图弄清楚如何。

我有这个数据：

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'
  }
];

有了上面的数据，我想在下面实现这个输出：

<div class="heading">
    <div>Technical details</div>
    <div class="container">
        <div class="row grid">
        <div class="grid-item">
            <div>Display</div>
            <div>Something</div>
        </div>
        <div class="grid-item">
            <div>OS</div>
            <div>Apple iOS</div>
        </div>
        </div>
    </div>
</div>
<div class="heading">
    <div>Manufacturer</div>
    <div class="container">
        <div class="row grid">
            <div class="grid-item">
                <div>Manu</div>
                <div>Apple</div>
            </div>
        </div>
    </div>
</div>

总结问题：我只想先显示标题，然后显示具有相同组值的行。

这是我需要帮助的代码：

function groupBy(collection, property) {
  var i = 0, val, index,
    values = [], result = [];
  for (; i < collection.length; i++) {
    val = collection[i][property];
    index = values.indexOf(val);
    if (index > -1) {
      result[index].push(collection[i]);
    }
    else {
      values.push(val);
      result.push([collection[i]]);
    }
  }
  return result;
}

var obj = groupBy(list, "group");

标签： javascripthtmljqueryfor-loop

解决方案

基本上，您要做的是按group属性对数据进行分组，然后从中形成一些 HTML。

分组很容易，然后只需使用您熟悉的任何语言来构建 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)
  })
})

推荐阅读