更改从JSON数组创建的列表中的项目

Question

我仍然是javascript的新手如此，如果有任何不明确的道歉 - 我有以下代码，它从JSON数组（rolesData）动态创建一个列表，并将来自“角色”的数据放入一个列表中（参见一对以下数组中的示例）列表中放置了哪些特定角色是随机确定的（即document.body.appendChild(createList(rolesData[~~(Math.random()*rolesData.length)].roles));这样工作正常，列表按预期创建（即如果随机数为0，则“John Smith”的角色将添加到列表中）。

但是，我现在想要创建一个附加功能，以便可以更改列表（例如，通过单击按钮），并在列表中更改来自不同名称的数据（即，如果随机数更改为1，则角色将添加“玛丽泰勒”）。我遇到的问题是列表中的每个人都有不同数量的角色 - 所以John有3个角色，Mary有4个，依此类推。

所以我正在努力思考如何创建一个更改列表的函数，该列表也能够更改列表中的项目数。我试图通过为初始表中创建的每个列表项分配一个id，然后执行getElementById并以这种方式更改它来尝试这样做 - 显然问题是如果在初始化中只创建了3个列表项表，那么只会创建3个id - 所以如果尝试添加第四个项目就没有id可以得到（我确信这个方法还有其他问题）。所以我对如何做到这一点有点困惑 - 任何帮助都会非常感激。

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));

（这是我一直试图采取的方法，显然不起作用）。

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