HTML returns [object Object]. How do I display the actual values?

Question

I am trying to display the values on the browser, but instead, it returns [object, object]. I would like the values to be displayed as: "1. Edward 2. John 3. Andy".

const person = [
    {name: 'Edward'},
    {name: 'John'},
    {name: 'Andy'}
];

for ( let i = 0; i < person.length; i++ ){
var people = person[i].name;
}

function createListItems(arr) {
    let list = '';
    for (let i = 0; i < arr.length; i++){
      list += `<li>${arr[i]}</li>`;
    }
    return list;
  }

let html = `<ol>${ createListItems(person) }</ol>`;
document.querySelector('main').innerHTML = html;

Answer 1

const persons = [
    { name: 'Edward' },
    { name: 'John' },
    { name: 'Andy' }
];

const list = []

for (const { name } of persons) {
    list.push(`<li>${name}</li>`)
}

document.getElementById('root').innerHTML = `<ol>${list.join('')}</ol>`;

Answer 2

const persons = [
    { name: 'Edward' },
    { name: 'John' },
    { name: 'Andy' }
]; 

let html = "";
   persons.forEach(val=>{
     html+= '<li>' + val.name + '</li>';
   }) 
    
document.getElementById('main').innerHTML = `<ol type="A">${html}</ol>`;