javascript - 从 json 响应创建列表菜单

Question

我正在开发一个项目，我正在获取下面的 JSON 输出，并希望从中创建一个菜单。使用 JavaScript 具有父菜单和子菜单的组:

myArray = [
  {group: "one", color: "red"},
  {group: "two", color: "blue"},
  {group: "one", color: "green"},
  {group: "one", color: "black"}
]

我想要下面的 html 输出

One
  red
  green
  black
Two
  blue

<ul class="nested">one
  <li><a href=“red”>red</li>
  <li><a href=“green”>green</li>
  <li><a href=“black”>black</li>
</ul>
<ul class="nested">two
  <li><a href=“blue”>blue</li>
</ul>

Answer 1

这里的第一步是通过 group 属性对数组进行键控。我会做这样的事情:

let keyedMenu = {};
myArray.forEach((item) => {
  if (!keyedMenu[item.group]) {
    keyedMenu[item.group] = [];
  }
  keyedMenu[item.group].push(item);
});

现在您的数据结构如下所示:

{
  one: [
    { group: 'one', color: 'red' },
    { group: 'one', color: 'green' },
    { group: 'one', color: 'black' }
  ],
  two: [ 
    { group: 'two', color: 'blue' }
  ]
}

下一步是从此数据结构创建标记:

let markup = ``;
Object.keys(keyedMenu).forEach((key) => {
  markup += `<ul class="nested">${ key }`;

  keyedMenu[key].forEach((item) => {
    markup += `<li><a href="${ item.color }">${ item.color }</a></li>`;
  });

  markup += `</ul>`;
});

最后，您需要将此标记注入(inject)到 DOM 中:

$('target-element-selector').html(markup);