Я все еще новичок в JavaScript, поэтому извиняюсь, если что-то из этого неясно - у меня есть следующий код, который динамически создает список из массива JSON (roleData) и помещает данные из "role" в список ( посмотрите пару примеров того, что находится в массиве ниже). Какие конкретные роли помещаются в список, определяется случайным образом (т. Е. document.body.appendChild(createList(rolesData[~~(Math.random()*rolesData.length)].roles));. Это нормально работает, и список создается как ожидается (т. Е. Если случайное число равно 0, то роли для «Джона Смита» будут добавлены в список). .
Однако теперь я хочу создать дополнительную функциональность, чтобы список можно было изменить (например, нажав кнопку), а данные из другого имени изменить в списке (т. Е. Если случайное число изменится на 1 тогда роли для "Мэри Тейлор" будут добавлены). У меня проблема в том, что для каждого из людей в списке есть разное количество ролей - у Джона 3 роли, у Мэри 4 и так далее.
Так что я изо всех сил пытаюсь придумать, как я могу создать функцию, которая изменяет список, которая также может изменять количество элементов в списке. Я попытался сделать это, назначив идентификатор каждому элементу списка, который создается в исходной таблице, а затем выполняя getElementById и меняя его таким образом - проблема с этим, очевидно, заключается в том, что если в исходной таблице создано только 3 элемента списка таблице, тогда будет создано только 3 идентификатора - поэтому, если вы попытаетесь добавить четвертый элемент, идентификатор не будет получен (и я уверен, что с этим подходом есть и другие проблемы). Так что я немного застрял в том, как я могу это сделать - любая помощь будет принята с благодарностью.
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;
};