从 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  blackTwo  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>`;

});

最后，您需要将此标记注入 DOM：

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