Javascript 从JSON数组向列表中添加项

我还是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个项目（最后一个项目显示为未定义）-我有点纠结的是如何使其循环通过对应于“角色”中有多少项的次数-例如，如果“角色”中有五项，则应添加五个列表项。i、 e.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

这样的固定文字数，而应迭代到

角色.length

数组属性是什么。更干净的方法是使用

array.forEach

，它在数组的每个元素上调用一个函数，并将当前元素传递到函数中。在下面的示例中，我将其称为元素

e

其次，从函数上下文访问全局变量的做法很糟糕。这是一个破坏模块化的不必要的依赖。如果您的全局作用域发生更改，您可能会无意中中断代码中其他位置的无关函数，因此很难对程序状态进行推理。将所有数据作为参数传递到函数中。在这种情况下，您可以跳过

num

参数，只需传入数据对象本身

第三，尽量保持函数的通用性。

createList

函数应该创建您想要的任何

列表，因此为变量提供通用名称并忽略

数据上的
.roles
属性（调用者可能会担心这一点）可以最大限度地实现代码重用

最后，我将
return
将节点数组返回给调用者，以便灵活地处理它（在本例中，将其附加到文档体）。调用方使用
Math.random（）
获取0到1之间的随机十进制数，并将其乘以数组的大小。因为数组索引是整数，所以按位的
~
（不是）去掉数字的小数部分。这大致相当于
Math.floor
或
|0


const rolesData=[{
“姓名”：“约翰·史密斯”，
“职务”：“项目经理”，
“角色”：[“规划和定义范围”、“活动规划和排序”、“资源规划”]，
},
{
“姓名”：“玛丽·泰勒”，
“标题”：“测试分析员”，
“角色”：[“为软件和系统设计和开发测试，以检测故障”，“分析缺陷和bug，确定导致缺陷和bug的原因”，“跟踪解决方案的成功情况”，“保持软件和系统文档的最新状态”]，
}
];
const createList=数据=>{
const list=document.createElement（“ul”）；
data.forEach（e=>{
const listItem=document.createElement（“li”）；
listItem.innerHTML=e；
list.appendChild（listItem）；
});
退货清单；
};
document.body.appendChild(
createList（rolesData[~~（Math.random（）*rolesData.length）].roles）
);
循环不应迭代到像
3
这样的固定文字数，而应迭代到
角色.length
数组属性的任何值。更干净的方法是使用
array.forEach
，它在数组的每个元素上调用一个函数，并将当前元素传递到函数中。在下面的示例中，我将其称为元素
e

其次，从函数上下文访问全局变量的做法很糟糕。这是一个破坏模块化的不必要的依赖。如果您的全局作用域发生更改，您可能会无意中中断代码中其他位置的无关函数，因此很难对程序状态进行推理。将所有数据作为参数传递到函数中。在这种情况下，您可以跳过
num
参数，只需传入数据对象本身

第三，尽量保持函数的通用性。
createList
函数应该创建您想要的任何
列表，因此为变量提供通用名称并忽略
数据上的
.roles
属性（调用者可能会担心这一点）可以最大限度地实现代码重用

最后，我将
return
将节点数组返回给调用者，以便灵活地处理它（在本例中，将其附加到文档体）。调用方使用
Math.random（）
获取0到1之间的随机十进制数，并将其乘以数组的大小。因为数组索引是整数，所以按位的
~
（不是）去掉数字的小数部分。这大致相当于
Math.floor
或
|0


const rolesData=[{
“姓名”：“约翰·史密斯”，
“职务”：“项目经理”，
“角色”：[“规划和定义范围”、“活动规划和排序”、“资源规划”]，
},
{
“姓名”：“玛丽·泰勒”，
“标题”：“测试分析员”，
“角色”：[“为软件和系统设计和开发测试，以检测故障”，“分析缺陷和bug，确定导致缺陷和bug的原因”，“跟踪解决方案的成功情况”，“保持软件和系统文档的最新状态”]，
}
];
const createList=数据=>{
const list=document.createElement（“ul”）；
data.forEach（e=>{
const listItem=document.createElement（“li”）；
listItem.i
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;
};