将项目从JSON数组添加到列表

Question

我仍然不熟悉JavaScript，因此对任何不清楚的道歉（或者如果这真的很简单）-基本上，我正在尝试从JSON数组创建列表，该列表将多个列表项添加到列表中（其中确切要添加的列表项的数量不同）。 例如，在下面的“角色”数组中，需要为John Smith添加三个列表项，为Mary Taylor添加四个列表项。

rolesData = [
{"name": "John Smith", 
 "title": "project manager", 
 "roles": 
 ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"],
}, 
 {"name": "Mary Taylor", 
 "title": "test analyst", 
 "roles": 
 ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"],
}, 

这是我用来添加列表项的循环。 对于上面的示例，此方法可用于第二个项目，因为要添加4个项目，并且循环遍历四次，但是显然它将为仅需要3个项目的项目添加4个项目（最后一个出现为未定义）-我正在苦苦挣扎的是如何使它循环遍历“角色”中有多少个项目的次数-例如，如果“角色”中有五个项目，它应该添加5个列表项。 即条件应该在for循环中是什么： for (i = 0; ???????; i++) ？

注意：“ num”是生成的随机数，因此，如果num为0，它将获取John Smith等的数据。

function createList(num) {

...

var rolesList = document.createElement("ul");

for (i = 0; i < 3; i++){
    var roleItem = document.createElement("li");
    roleItem.innerHTML = rolesData[num].roles[i];
    rolesList.appendChild(roleItem);
}

更新：解决了如何在加载页面时使用正确的数字填充列表的问题，我现在尝试添加一项功能，即如果您单击按钮，它将更改列表中的项目-这意味着例如，它可能从3个项目变为4个项目，反之亦然。

我试图从下面的@ggorlen（对创建列表非常有用）中改编答案，但是使用getElementById而不是create element（创建列表时，我将ID“ featuredList”分配给ul，将“ listItem” +分配给li的，因此对于每个创建的新listItem，其ID为listItem1，listItem2等-我已经在console.log中进行了检查，并且看来工作正常。 我相信问题在于，如果初始列表仅包含3个项目，那么仅分配了3个listItem ID，因此，如果尝试将列表更改为其中包含4个列表的ID，则第四个条目将没有ID-因此我想我的问题是我该怎么做，以便如果要更改元素，可以将其更改为包含更多或更少项目的列表？

const createList = data => {
const list = document.getElementById("featuredList");
count = 1;
   data.forEach(e => {
     const listItem = document.getElementByID("listItem" + count);
     listItem.innerHTML = e;
     list.appendChild(listItem);
     count++;
  });
return list;
};

Answer 1

您的循环不应迭代到固定的文字数字（如3 ，而应迭代到任何roles.length数组属性。 甚至更干净一点，使用array.forEach ，它在数组的每个元素上调用一个函数并将当前元素传递到该函数中。 在下面的示例中，我将其称为e作为元素。

其次，从函数上下文访问全局变量是不明智的做法。 这是不必要的依赖关系，会破坏模块化。 如果全局范围发生变化，则可能会无意间破坏代码中其他地方不相关的功能，并且很难推断出程序状态。 将所有数据作为参数传递给函数。 在这种情况下，您可以跳过num参数，而只是传入数据对象本身。

第三，尝试使功能尽可能通用。 createList函数应创建所需的任何<ul>列表，因此为变量提供通用名称，并忽略data的.roles属性（调用者可能会担心这一点），从而可以最大程度地重复使用代码。

最后，我return荷兰国际集团的节点数组返回给调用者，允许在什么就用它做方面的灵活性（在这种情况下，附加到文档正文）。 调用者使用Math.random()取一个介于0和1之间的随机十进制数，并将其乘以数组的大小。 由于数组索引是整数，因此按位~~ （不是）会截断数字的小数部分。 这大致等于Math.floor或| 0 | 0 。

 const rolesData = [{ "name": "John Smith", "title": "project manager", "roles": ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"], }, { "name": "Mary Taylor", "title": "test analyst", "roles": ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"], } ]; const createList = data => { const list = document.createElement("ul"); data.forEach(e => { const listItem = document.createElement("li"); listItem.innerHTML = e; list.appendChild(listItem); }); return list; }; document.body.appendChild( createList(rolesData[~~(Math.random()*rolesData.length)].roles) ); 

如果您更喜欢简洁，那么reduce （ doc ）是一个不错的选择：

 const rolesData = [{ "name": "John Smith", "title": "project manager", "roles": ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"], }, { "name": "Mary Taylor", "title": "test analyst", "roles": ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"], } ]; const createList = data => data.reduce((a, e) => { const item = document.createElement("li"); item.innerHTML = e; a.appendChild(item); return a; }, document.createElement("ul") ); document.body.appendChild( createList(rolesData[~~(Math.random()*rolesData.length)].roles) ); 

Answer 2

这是使用reduce并利用appendChild返回附加元素的一种选择，因此您可以一次性创建和附加并获得对附加节点的引用。

 var rolesData = [ {"name": "John Smith", "title": "project manager", "roles": ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"], }, {"name": "Mary Taylor", "title": "test analyst", "roles": ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"], }]; function createList(data) { var list = document.createElement('ul'); list.appendChild(data.roles.reduce((frag, role) => { var item = frag.appendChild(document.createElement('li')); item.innerHTML = role; return frag; }, document.createDocumentFragment())); return list; } window.onload = function(){ document.body.appendChild(createList(rolesData[Math.random()*rolesData.length|0])); };