Looping through an array of objects successfully

Question

I have an array of object and i want to loop through from this with the help of foreach but I got array I dont know why.
I want to display my array in a div.

This is my code:

var questions = [{
    question: 'my name is?',
    answere: ['jame', 'rock', 'batista', 'micheal'],
    correctAnswere: 'Ahmad'
  },
  {
    question: 'your name is?',
    answere: ['jhon', 'rock', 'watson', 'cook'],
    correctAnswere: 'Ahmad'
  }];
var getquiz = document.getElementById('demo')
questions.forEach(function(arrayitem) {
  getquiz = getquiz.innerHTML + arrayitem.question + "<br>";
});

<div id="getquiz">

</div>

What you probably want is `getquiz.innerHTML = getquiz.innerHTML + ...`. Also, `var getquiz = document.getElementById('getquiz')`. — axiac, Mar 28 '18 at 08:23
Possible duplicate of [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — eisbehr, Mar 28 '18 at 08:23
questions.forEach question is not array ! use questions.answers.forEach — Nikola Lukic, Mar 28 '18 at 08:26

score 0 · Answer 1 · answered Mar 28 '18 at 08:28

This is because you are replacing getquiz dom element with a string instaed of concatatenate to innerHTML property. Also, your selector in getElementById is wrong.

Here is a correct snippet:

var questions=[{
    question:'my name is?',
    answere:['jame','rock','batista','micheal'],
    correctAnswere:'Ahmad'
  },
  {
    question:'your name is?',
    answere:['jhon','rock','watson','cook'],
    correctAnswere:'Ahmad'
  }
];

var getquiz=document.getElementById('getquiz');
questions.forEach(function (arrayitem)
{
  getquiz.innerHTML += arrayitem.question+"<br>";
});

<body>
    <div id="getquiz">

    </div>
</body>

thats good and if i want both question one by one how i can do this ? — Ahmad Bilal, Mar 28 '18 at 08:35

score 0 · Accepted Answer · answered Mar 28 '18 at 08:42

Correction in your code is you are getting wrong document.getElementById('demo') instead of this you need to get document.getElementById('getquiz').

var questions = [{
    question: 'my name is?',
    answere: ['jame', 'rock', 'batista', 'micheal'],
    correctAnswere: 'Ahmad'
  },
  {
    question: 'your name is?',
    answere: ['jhon', 'rock', 'watson', 'cook'],
    correctAnswere: 'Ahmad'
  }
];

var getquiz = document.getElementById('getquiz')
questions.forEach(function(arrayitem) {
  getquiz.innerHTML += arrayitem.question + "<br>";
});

<div id="getquiz">

</div>

You can also use map method of array.

const questions = [{
  question: 'my name is?',
  answere: ['jame', 'rock', 'batista', 'micheal'],
  correctAnswere: 'Ahmad'
}, {
  question: 'your name is?',
  answere: ['jhon', 'rock', 'watson', 'cook'],
  correctAnswere: 'Ahmad'
}];

let getquiz = questions.map(item => {
  return item.question;
});

document.getElementById('getquiz').innerHTML = getquiz.join('<br>');

<div id="getquiz">

</div>

Looping through an array of objects successfully

2 Answers2