Getting the key and value of an object in javascript via 'for in'

Question

I am beginning a exercise to create a quiz in javascript. Anyway, I have an array which contains the questions; each question is a anonymous object...

var allQuestions = [{
"question": "Who was Luke's wingman in the battle at Hoth?",
"choices": ["Dak", "Biggs", "Wedge", "fx-7"],
"correctAnswer": 0},
{
"question": "What is the registry of the Starship Reliant?",
"choices": [ "NX-01", "NCC-1864", "NCC-1701", "NCC-2000"],
"correctAnswer": 1}...etc.

At this point i'd like to simply iterate through them and insert them into the DOM.

var output = '';

for (key in allQuestions[0]) {
        output += '<li>' + allQuestions[0] + '</li>';
    }

 var update = document.getElementById("question");

 update.innerHTML = output;

But all I get is:

[object Object]
[object Object]
[object Object]

At some point i'd like to match or have 'question', 'choices' flow in to corresponding elements on the page....

<h2>question</h2> //question from object
<ul id="question">
 <li>choice</li> //choice from object
 <li>choice</li>
 <li>choice</li>
 <li>choice</li>

You’re not accessing anything using the key, all you do is (try to) output allQuestions[0] multiple times – and since that is an object, you are only getting [object Object] when that is put into a string context … — C3roe
– C3roe, Commented May 2, 2014 at 3:00
In your loop you need to access the properties of the object: allQuestions[0].key. — Spencer Wieczorek
– Spencer Wieczorek, Commented May 2, 2014 at 3:02

Ahmad Mageed · Accepted Answer · 2014-05-02 03:02:01Z

2

You're using allQuestions[0] inside the loop, but you probably meant to refer to key:

for (key in allQuestions[0]) {
    output += '<li>' + key + '</li>';
}

However, this will return question, choices, correctAnswer. If the items in allQuestions are in the same format you're better off looping over them and referring to the relevant properties:

for (var i = 0; i < allQuestions.length; i++) { 
  var item = allQuestions[i];
  console.log(item.question);
  console.log(item.choices);
  // etc. 
}

answered May 2, 2014 at 3:02

Ahmad Mageed

96.9k20 gold badges170 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Antonio Pavicevac-Ortiz Over a year ago

That works! But it spits out all the questions and their respective answers, on the page. I'd like to show just the first question and answer.

Ahmad Mageed Over a year ago

@AntonioOrtiz if you just want to work with the first item then in my code get rid of the for loop and replace allQuestions[i] with allQuestions[0] to grab the first item at index 0. The rest of the code would still apply.

Antonio Pavicevac-Ortiz Over a year ago

Thanks! One thing though. I tried:

var answerOutput = ""; for (var i = 0; i < allQuestions.length; i++) { var item = allQuestions[0];         answerOutput += "<li>" + item.choices[i] + "</li> <br/>";  };  var update = document.getElementById("answers");  update.innerHTML = answerOutput;

And it shows the first choices in the Array but I also get 6 undefined. I tried to hook up a second for loop but that crashed the browser. I suspect the solution is simpler. Thanks!

Collectives™ on Stack Overflow

Getting the key and value of an object in javascript via 'for in'

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related