使用各自的对象数据为数组中的每个对象创建和填充元素

Question

我试图从一个排序数组中创建一个值列表，该列表将自动为排序数组内的每个唯一对象生成一个DOM元素。

我有一个JSFiddle在这里，因为它需要DOM: https://jsfiddle.net/o09aenby/1/

使用

生成对象数组

// random value for the sake of unique objects
let randomVal = Math.floor(Math.random() * 100);

const data = {
value: randomVal
}

array.push(data);
let sortedValues = (array) => {
return array.sort((a, b) => {
return b.value - a.value;
})
}

sortedArray = sortedValues(array);

我循环遍历排序数组并使用for loop

创建一个DOM元素

let displayData = [];
displayData = sortedArray;
for (let i = 0; i < displayData.length; i++) {
let element = document.createElement('p');
element.classList.add('data-output', 'node');
element.innerHTML = `Value: ${data.value}`
list.append(element);
}

目标是保留数据数组，因为我将把它保存到localStorage JSON中，然后根据JSON进行填充，所以数组的数据需要保留。

我试过使用forEach，但也无法让它工作。

Answer 1

您永远不会在这里更新data:

element.innerHTML = `Value: ${data.value}`

所以你将每个元素设置为相同的值。你需要做

element.innerHTML = `Value: ${displayData[i].value}`