What method to use to access multiple objects in an array?

Question

I'm new to javascript and still learning them.

So I was building a project where I want to display a multiple object, which I put it in an array, to the DOM. I am not sure what method to use to access the object inside the array.


    
        List of Names

This is my js file:

const nameList = document.querySelector('.name-list');

//List of Names
const john = {
    name: 'john',
    car: 'fiat',
    address: 'new york'
}
const mike = {
    name: 'mike',
    car: 'toyota',
    address: 'sydney'
}
const greg = {
    name: 'greg',
    car: 'nissan',
    address: 'melbourne'
}

//Store list of names in an array
const allNames = [
    john,
    mike,
    greg
]

function displayName (){

    //Not sure what methods to use to     
    return `
        
            Name: ${allNames.name}
            Car: ${allNames.car}
            Address: ${allNames.address}
        
    `
}

So I kind of want to display all the objects in the DOM. Is it necessary to put the objects in the array first? What methods do I use to return a list in the file? Or do you know any easier methods to display all the objects in the DOM?

Thank you so much for the help.

user_10182897 · Answer

Maybe you can try something like this :

function showNameList() {
  const allNames = [
      {
          name: 'john',
          car: 'fiat',
          address: 'new york'
      },
      {
          name: 'mike',
          car: 'toyota',
          address: 'sydney'
      },
      {
          name: 'greg',
          car: 'nissan',
          address: 'melbourne'
      }
  ]
  var namelist = allNames.map(function (t, i) {
    return `Name :  ${t.name}
Car :  ${t.car}
Address :  ${t.address}

`;
  })

  document.getElementById('name-list').innerHTML =
    '' + namelist.join('
') + ''
}

showNameList()


    
        List of Names

user_11420123 · Answer

use map function to display them :

const values = allNames.map(item=>{
  return(
      
            Name: ${item.name}
            Car: ${item.car}
            Address: ${item.address}
        
  )
})


    
        List of Names
    

    
    {values}

What method to use to access multiple objects in an array?

2 Answers