从 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) => {&nbsp; if (!keyedMenu[item.group]) {&nbsp; &nbsp; keyedMenu[item.group] = [];&nbsp; }&nbsp; keyedMenu[item.group].push(item);});现在您的数据结构如下所示：{&nbsp; one: [&nbsp; &nbsp; { group: 'one', color: 'red' },&nbsp; &nbsp; { group: 'one', color: 'green' },&nbsp; &nbsp; { group: 'one', color: 'black' }&nbsp; ],&nbsp; two: [&nbsp;&nbsp; &nbsp; { group: 'two', color: 'blue' }&nbsp; ]}下一步是从这个数据结构创建标记：let markup = ``;Object.keys(keyedMenu).forEach((key) => {&nbsp; markup += `<ul class="nested">${ key }`;&nbsp; keyedMenu[key].forEach((item) => {&nbsp; &nbsp; markup += `<li><a href="${ item.color }">${ item.color }</a></li>`;&nbsp; });&nbsp; markup += `</ul>`;});最后，您需要将此标记注入 DOM：$('target-element-selector').html(markup);