Как перебрать массив объектов и получить результаты в виде списка?

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

как предложено Тайлером, я добавлю некоторый контекст к решению.Я скопировал ту же функцию, а затем просто использовал.для доступа к содержимому объекта.

Answer 3

Я только что проверил это в консоли браузера.Не уверен, что вы ищете, но если у вас есть массив объектов и вы хотите создать список ul из этого, вы можете попробовать что-то вроде этого:

var options = [{firstName: "John",lastName: «Доу», возраст: 46}, {firstName: «Майк», lastName: «Смит», возраст: 46}, {firstName: «Джо», lastName: «Грязь», возраст: 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');
        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>

Возможно, вы можете изменить это в соответствии со своими потребностями.

Вот еще один вариант:

var options = [{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');
        var text = new Array();
        for (var key in array[i]) {
        // Set its contents:
        text.push(array[i][key]);
        }
        item.appendChild(document.createTextNode(text.join(",")));
        // 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);