时间戳

首页 > 解决方案 > 从 json 响应创建列表菜单

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

问题描述

我正在做一个项目，我正在获取下面的 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”&gt;red</li>
  <li><a href=“green”&gt;green</li>
  <li><a href=“black”&gt;black</li>
</ul>
<ul class="nested">two
  <li><a href=“blue”&gt;blue</li>
</ul>

标签： javascriptjqueryhtmljson

解决方案

这里的第一步是通过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);

推荐阅读