Exploring object key-value pairs using the 'for in' loop in JavaScript

Question

Exploring object key-value pairs using the 'for in' loop in JavaScript

Embarking on a project to develop a quiz in javascript, I am starting with an array that holds the questions as anonymous objects.

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.

My goal now is to iterate through these questions and display them in the DOM.

var output = '';

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

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

 update.innerHTML = output;

However, when I try this, I only see:

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

Eventually, I aim to sync up 'question' and 'choices' to populate corresponding elements on the page like so:

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

javascript arrays json object

Answer 1

Answer №1

Instead of using allQuestions[0] within the loop, consider referencing key:

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

However, using this will result in question, choices, and correctAnswer. If the elements in allQuestions are structured similarly, it's recommended to iterate over them and access the corresponding properties:

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

Answer 2

Instead of using allQuestions[0] within the loop, consider referencing key:

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

However, using this will result in question, choices, and correctAnswer. If the elements in allQuestions are structured similarly, it's recommended to iterate over them and access the corresponding properties:

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

Exploring object key-value pairs using the 'for in' loop in JavaScript

Answer №1

Similar questions

Create HTML content from a file retrieved from the server

Getting some clarity on how to structure a project using Node.js, Express.js, and React.js

The Javascript document refuses to load

Interactions with API endpoints: requests and corresponding responses

Verify the dates in various formats

The vertical scroll position of a container with overflowing content does not correspond to the height of its elements

Exploring the advanced features of OpenOffice Draw for improved geometry analysis

How to Show a GIF in ASP.NET Core 3.0 When OnPost() is Invoked

In a React TypeScript application, prevent users from clicking on buttons that represent the same number of answers in a multiple choice question

Angular 2 System.config map leading to a 404 error message

Building a custom DSL expression parser and rule engine

Using res.send() updated the content of the sub-object within my object

Appending or removing a row in the P-Table will result in updates to the JSON

Revamp the state within a React component

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

Transforming a JSON String into a class that selectively uses properties from the JSON string

I am looking to update the appearance of a button dynamically in Vue.js based on changes to an

Assign the value from a drop-down menu to an SQL variable dynamically without the need for a submit button

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

What is the process for determining the vertex position of geometry in three.js after applying translate, rotate, and scale transformations?