javascript - 在 HTML 标签中动态加载 JSON 信息

Question

我试图在菜单中显示我的 JSON 文件中的所有类别。任何人都可以帮我处理 JavaScript 代码吗？我已经尝试了几件事，但都是徒劳的。

HTML:(静态)

<ul class="cd-faq-categories" id="onderwerp">
     <li><a class="selected" href="#algemeen">Test</a></li>
     <li><a href="#1">Test2</a></li>
     <li><a href="#2">Test3</a></li>
     <li><a href="#3">Test4</a></li>
     <li><a href="#4">Test5</a></li>
</ul> <!-- cd-faq-categories -->

JSON 结构:

 {
    "id": 3,
    "category": "Eten",
    "question": "Vis",
    "answer": "Ham",
    "date": "29-11-18"
  }

谁能帮我解决这个问题？我试图在 HTML 标记中使用相同的名称和 href，例如:

<li><a href="${category}">$c{category}</a></li>

Answer 1

这是有效的解决方案:

var data =[
    {
      "id": 3,
      "category": "Eten",
      "question": "Vis",
      "answer": "Ham",
      "date": "29-11-18"
  },
  {
      "id": 3,
      "category": "Eten 2",
      "question": "Vis",
      "answer": "Ham",
      "date": "29-11-18"
  },
  {
      "id": 3,
      "category": "Eten 3",
      "question": "Vis",
      "answer": "Ham",
      "date": "29-11-18"
  }
]

const liTemplate = (category) => `<a href="${category}">${category}</a>`

data.forEach(item => {
    var child = document.createElement('li');
    child.innerHTML = liTemplate(item.category);
    document.querySelectorAll('.cd-faq-categories')[0].appendChild(child);
})

解决方案是采用 Json 对象。遍历所有项目并使用简单的普通 JS appendChild 方法附加到 DOM li 元素。