时间戳

首页 > 解决方案 > JSON 到无序列表，已排序

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

问题描述

我有一个 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>

标签： javascripthtmljson

解决方案

您快到了。这是一个概述：

  • 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>

推荐阅读