Calling specific object by ID from a JSON file in my js

Question

I am making a trivia game, and I am trying to pull questions and answers using a local json file. First, I did this test to confirm the file was working and get a basic understanding of what I am trying to do:

 $.getJSON('/trivia.json', function(data) {
   var items = [] 
   $.each(data, function (item, i) {
     items.push('<p id="' + i.order + '">' + i.question + ' - ' + i.correcta +  '</p>');
   });

 $('<p/>', {
  'class': 'my-new-list',
   html: items.join('')
 }).appendTo('#example');});

That worked in displaying all of the different question/answer combos from the json file (so all five questions + answers as <p>. Since I want to only show one question at a time as if someone were playing trivia, I will next want to only call a specific question at a time. Let's say I wanted to only show the the question/answer from id=1 and the json file looked like so:

[{
    "id": 1,
    "order": 1,
    "question": "Who was the only American President to learn English as a second language? ",
    "answer1": "John Quincy Adams",
    "answer2": "Martin van Buren",
    "answer3": "William McKinley ",
    "answer4": "Andrew Jackson",
    "correcta": "Martin van Buren",
    "published": "2014-11 04",
    "url": "http://example.com/trivia_demos/1.json"
}]

Each subsequent question in my json file follows that structure, so my belief is that I need to change the "id" attribute in the items.push function. From looking at some documentation, I can't see how to integrate that specific value into my function.

Any idea how to do that (use the id to pull only the first question + correcta) or accomplish such with a different method?

Answer 1

One way would be to use the filter method available to arrays. We'll wrap it in a function so that you give an id and the list of trivias and it picks out the one with that id.

function getTrivia(id, items){
    var filtered = items.filter(function(item){
        return item.id == id;
    });
    return filtered[0];
}

getTrivia(1, items); //the question/answer with id 1
getTrivia(10, items); //the question/answer with id 10

To describe briefly how it works, items.filter will give back an array of all the items where the return value is true--in this case item.id == id. Ideally this will only be an array with one element. If for some reason it isn't, it will return the first trivia element when there are duplicate id's or undefined if there are no trivias with that id. You can change this behavior, of course, to whatever you please by altering return filtered[0].

Answer 2

Check this link DEMO FIDDLE I have added functionality for next do similar for previous button functionality.

// SAMPLE HTML CODE

<input type="button" id="btnNext" value="next"/>

<input type="button" id="btnPrev" value="prev"/>

<br/>

<div id="container">
    <div id="child" class="1"></div>
</div>

// JS CODE

var data=[{
    "id": 1,
    "order": 1,
    "question": "Who was the only American President to learn English as a second language? ",
    "answer1": "John Quincy Adams",
    "answer2": "Martin van Buren",
    "answer3": "William McKinley ",
    "answer4": "Andrew Jackson",
    "correcta": "Martin van Buren",
    "published": "2014-11 04",
    "url": "http://example.com/trivia_demos/1.json"
  },{
    "id": 2,
    "order": 1,
    "question": "Who was the only American President to learn English as a second language? ",
    "answer3": "John Quincy Adams",
    "answer2": "Martin van Buren",
    "answer1": "William McKinley ",
    "answer4": "Andrew Jackson",
    "correcta": "Martin van Buren",
    "published": "2014-11 04",
    "url": "http://example.com/trivia_demos/1.json"
  },{
    "id": 3,
    "order": 1,
    "question": "Who was the only American President to learn English as a second language? ",
    "answer2": "John Quincy Adams",
    "answer1": "Martin van Buren",
    "answer3": "William McKinley ",
    "answer4": "Andrew Jackson",
    "correcta": "Martin van Buren",
    "published": "2014-11 04",
    "url": "http://example.com/trivia_demos/1.json"
  }];

// inside document.ready

var index=$("#child").attr("class");
//alert(data.length);
//loading data associated with index
var resultSet = $.grep(data, function (e) {
    return e.id=='1';
});
$("#child").html("Question :"+resultSet[0].question+" and first answer choice = "+resultSet[0].answer1);


$("#btnNext").click(function(){
var temp=$("#child").attr("class");
var index=parseInt(temp);

if(index==data.length)
{
    // Last Question
    // Only If you Need to return to first question
     var newindex=1;
    var resultSet = $.grep(data, function (e) {
        return e.id==newindex;
    });
    $("#child").html("Question "+newindex+" :"+resultSet[0].question+" and  answer choice = "+resultSet[0].answer1);  
    $("#child").attr("class",""+newindex); 
}
else
{
    var newindex=index+1;
    alert(newindex);
    var resultSet = $.grep(data, function (e) {
        return e.id==newindex;
    });
    $("#child").html("Question "+newindex+" :"+resultSet[0].question+" and  answer choice = "+resultSet[0].answer1);  
    $("#child").attr("class",""+newindex); 
}
});