Показать массив объектов, не работающих в браузере

Question

Я хочу создать массив объектов и отобразить определенный список свойств при выполнении определенных условий.

Следующий код делает то, что я хочу, когда я печатаю его на консоли или использую document.write.

var people = [{ 
    firstName: 'John',
    lastName: 'Doe',
    age: 23,
    },{ 
    firstName: 'Jane',
    lastName: 'Doe',
    age: 53,
    }]

    for(i = 0; i < people.length; i++){
        if(people[i].age < 65){
            document.write(people[i].firstName + ' ' + 
            people[i].lastName + ' has printed to document. <br>');             
        }
    }

Но когда я запускаю код в браузере, используя document.getElementById, отображается только последний элемент.

for(i = 0; i < people.length; i++){
    if(people[i].age < 65){
        result = 'Only ' + people[i].firstName + ' ' + 
            people[i].lastName + ' is printed to document. Why?';               
    }
}
document.getElementById('names').innerHTML = result;

Может ли кто-нибудь объяснить мне, почему все элементы отображаются с использованием document.write? При использовании document.getElementById?

отображается только последний элемент

Answer 1

Проблема в этой строке:

result = 'Only ' + people[i].firstName + ' ' + 
        people[i].lastName + ' is printed to document. Why?';

Поскольку вы присваиваете строку сообщения переменной result.Поскольку вы находитесь в loop, переменная result будет содержать только последнее значение.

Вам необходимо concat передать сообщение переменной result.

for(i = 0; i < people.length; i++){
    if(people[i].age < 65){
        result += 'Only ' + people[i].firstName + ' ' + 
            people[i].lastName + ' is printed to document. Why?';               
    }
}

Также вы можете использовать string templates для форматирования сообщения.

result += `Only ${people[i].firstName} ${people[i].lastName} is printed to document. Why?`;