Question

我正在尝试从一系列联系人中创建无序列表。

该数组将类似于：

let contacts = [{firstName:"John", lastName:"Doe", age:46}, {firstName:"Mike", lastName:"Smith", age:46}, {firstName:"Joe", lastName:"Dirt", age:46}];

我可以像这样从基本数组创建列表：

var options = [
        set0 = ['Option 1','Option 2'],
    ];

function makeUL(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(array[i]));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById('foo').appendChild(makeUL(options[0]));

我不太了解如何使用对象创建列表。

Answer 1

在JavaScript中，对象可以使用来访问属性。或[]。

ex）array[i].firstName或array[i]['firstName']

您可以使用模板字符串或JSON.stringify

const item = array[i];

item.appendChild(document.createTextNode(`firstName: ${item.firstName}, lastName: ${item.lastName}`));

或

item.appendChild(document.createTextNode(JSON.stringify(array[i]));

Answer 2

let contacts = [
    {firstName:"John", lastName:"Doe", age:46}, 
    {firstName:"Mike", lastName:"Smith", age:46}, 
    {firstName:"Joe", lastName:"Dirt", age:46}
];

function makeUL(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(array[i].firstName + ' ' + array[i].lastName + ' ' + array[i].age));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;

}

document.getElementById('foo').appendChild(makeUL(contacts));

如tyler所建议，我将在解决方案上添加一些上下文。我复制了相同的功能，然后就使用了。访问对象的内容。

Answer 3

我刚刚在浏览器控制台中对此进行了测试。不确定您要查找的内容是什么，但是如果您有一个对象数组并想从中创建一个ul列表，则可以尝试如下操作：

var options = [{firstName：“ John”，lastName：“ Doe”，age：46}，{firstName：“ Mike”，lastName：“ Smith”，age：46}，{firstName：“ Joe”， lastName：“ Dirt”，age：46}];

<div class="container">
  <p id="timer">
    <span class="timer-days"></span>
    <span class="timer-hours"></span>
    <span class="timer-minutes"></span>
    <span class="timer-seconds"></span>
  </p>
</div>

那会给你这样的东西：

function makeUL(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement('li');
        for (var key in array[i])
        // Set its contents:
        item.appendChild(document.createTextNode(array[i][key] + " "));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #foo:

alert(makeUL(options).outerHTML);

您可以根据自己的需要进行修改。

这是另一种变化：

<ul><li>John Doe 46 </li><li>Mike Smith 46 </li><li>Joe Dirt 46 </li></ul>

如何遍历对象数组并使结果显示在列表中？

3 个答案: