I am trying to populate a div with an object

Question

I am trying to populate a div with an object when the start button is pressed but all I am getting is nan in the newly created div any idea what is wrong with the following would be helpful.

var trivia = [
  // question 1
    {
        "question": "Q1?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 2
    {
        "question": "Q2?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 3
    {
        "question": "Q3?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 4
    {
        "question": "Q4?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    }
];



 console.log(trivia);

$("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
testDiv.innerHTML = trivia.question + trivia.answers;
var questionsDiv = document.getElementById('questions');
questionsDiv.appendChild(testDiv);
});

Answer 1

 var trivia = [ // question 1 { "question": "Q1?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 }, // question 2 { "question": "Q2?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 }, // question 3 { "question": "Q3?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 }, // question 4 { "question": "Q4?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 } ]; console.log(trivia); $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); testDiv.innerHTML = trivia[0].question + trivia[0].answers; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="startButton">click</button> <div id="questions"> </div> 

Because you trying to get value from array of object. you need to provide index to get value from it. like this trivia[0].question.

Or

You can change the structure of your object as per your requirement.

Answer 2

Not really sure what you want here, since it's an array you are starting with. Either pick one element to sure with trivia[0].question or loop over them:

<div id="questions"></div>
<button id="startButton" onclick="populate()">start</button>
<script>
var trivia = [
// question 1
    {
        "question": "Q1?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 2
    {
        "question": "Q2?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 3
    {
        "question": "Q3?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 4
    {
        "question": "Q4?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    }
];



console.log(trivia);
function populate() {
    var i;
    for (i = 0; i< trivia.length; i++){
        var testDiv = document.createElement("div");
        testDiv.innerHTML = trivia[i].question + trivia[i].answers;
        var questionsDiv = document.getElementById('questions');
        questionsDiv.appendChild(testDiv);
}
};
</script>

Answer 3

trivia is an array of objects, therefore You need to provide array index in order to get values from it.Run a loop in order to retrieve all properties.

For example:

 var trivia = [ // question 1 { "question": "Q1?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 }, // question 2 { "question": "Q2?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 }, // question 3 { "question": "Q3?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 }, // question 4 { "question": "Q4?", "answers": ["1", "2", "3", "4"], "correctAnswer": 0 } ]; console.log(trivia); $(function(){ $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); testDiv.innerHTML = trivia[0].question + trivia[0].answers; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <dic id="questions"> <button type= "button" id="startButton">start</button> </div>