javascript - JSON 到无序列表，已排序

Question

我有一个 xml 文件，我用它创建了一个 JSON 数组，其中包含参议员的对象，包括政党、姓名以及是否已投票的状态。我的 HTML 列表中只需要显示名称。不过，我不知道如何实现这一点，而且我想动态地对民主党人和共和党人进行分类。这是数组的示例:

[{"name":"Chuck Schumer","party":"Democrat","voted":false},
{"name":"Dick Durbin","party":"Democrat","voted":false}, ...]

我不知道如何做到这一点。我在 html 中设置了 ID 元素，因为我知道我需要它。

我需要先进行 JSON.parse 吗？如何将它们连接到 ID 值？

这是我的 HTML 正文。

     <div id="dropLists" style="display: table">
     <div style="display: table-row">

     <div class="dropList">
        <fieldset>
            <legend>Democrats:</legend>
            <ul id="democrats">

            </ul>
        </fieldset>
     </div>

     <div class="dropList">
        <fieldset>
            <legend>Republicans:</legend>
            <ul id="republicans">

            </ul>
        </fieldset>
     </div>

     </div>
     </div>

Answer 1

你就快到了。概述如下:

• document.querySelector 选择 2 个 ul 元素
• document.createElement 创建 li 元素
• element.appendChild 将 li 元素插入到 `uls 元素中。

let data = [{
    "name": "Chuck Schumer",
    "party": "Democrat",
    "voted": false
  },
  {
    "name": "Dick Durbin",
    "party": "Democrat",
    "voted": false
  },
  {
    "name": "X Y Z",
    "party": "Republican",
    "voted": false
  },
];

data.forEach(({name, party}) => {
  let itemEl = document.createElement('li');
  itemEl.textContent = name;

  let listId = party === 'Democrat' ? '#democrats' : '#republicans';
  let listEl = document.querySelector(listId);
  listEl.appendChild(itemEl);
});

<div id="dropLists" style="display: table">
  <div style="display: table-row">

    <div class="dropList">
      <fieldset>
        <legend>Democrats:</legend>
        <ul id="democrats">

        </ul>
      </fieldset>
    </div>

    <div class="dropList">
      <fieldset>
        <legend>Republicans:</legend>
        <ul id="republicans">

        </ul>
      </fieldset>
    </div>

  </div>
</div>