如何在JavaScript中使用对象键作为标题和值子列表

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

我的脚本文件：

{
  "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
  });
}

{
“业务”：{
“算术运算”：[“+”、“-”、“*”、“/”]，
“比较操作”：[“等于”、“大于”、“大于等于”、“小于”、“小于等于”]
}
}
获取（'./js/data.json'）
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
fetchList（数据['Operations']）
});
fetchList=data=>{
Object.entries（data.forEach）（[key，values]）=>{
出租清单；
值。forEach（项=>{
list=`
${item}
`；
});
李康斯特=
`
${key}
${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>

算术运算

/

比较操作

小于等于

---

既然没有重复，我就回答。这里有两件事

替换：

=

附加：

+=

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

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

---

list=

每次只覆盖该值。我想你是想在第一次将

列表

初始化为空字符串后，使用

+=

而不是

=

。我想罗宾的评论就是答案。