时间戳

首页 > 解决方案 > 如何在 JavaScript 中使用 Object 键作为标题和值子列表

javascript - 如何在 JavaScript 中使用 Object 键作为标题和值子列表

问题描述

我有一个简单的 json 文件，其中包含数学运算信息。我想将 json 数据放入 ul 中，这样，对象键应该是带有标题类的标题，并且它的值应该在每个标题之后列出。

我的脚本文件：

{
  "Operations":{
   " Arithmetic Operations" : ["+", "-", "*", "/"],
   "Comparision Operations" : ["Equals","Greater than","Greater than equal to","Less than","Less than equal to"]
  }
}

fetch('./js/data.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    fetchList(data['Operations'])
  });

fetchList = data => {
  Object.entries(data).forEach(([key, values]) => {
    let list;
    values.forEach(item => {
      list = `<li class="list">${ item }</li>`;
    });

    const li =
      `<li class="head">${ key }</li>
        ${ list }
    `;

    console.log(li)
    document.querySelector('#operations .lists').innerHTML += li
  });
}

结果仅显示每个值的最后一个值

<li class="head"> Arithmetic Operations</li>
<li class="list">/</li>
<li class="head">Comparision Operations</li>
<li class="list">Less than equal to</li>

标签： javascriptarraysobject

解决方案

既然没有骗子，我会回答的。这里有两件事。

  1. 代替：=
  2. 附加：+=

你正在做的是替换。你需要做的是追加。您的解决方案是：

let list = "";
values.forEach(item => {
  list += `<li class="list">${ item }</li>`;
});

向您展示正在发生的事情的示例片段将是：

var arr = ["One", "Two", "Three"];

var one = "";
arr.forEach(function (a) {
  one = a;
});
console.log(one);

var two = "";
arr.forEach(function (a) {
  two += a;
});
console.log(two);

我希望你能理解上面带有变量one和的情况two。您正在寻找two但您已经实施了one.

推荐阅读