在我的js中按ID从JSON文件调用特定对象

Question

我正在制作一个琐事游戏，并尝试使用本地json文件提取问题和答案。首先，我做了这个测试，以确认文件正在工作，并对我正在尝试做的事情有一个基本的了解：

 $.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');});

这在显示json文件中所有不同的问题/答案组合时起作用(所以所有五个问题+答案都是<p>。因为我想一次只显示一个问题，就好像有人在玩琐碎游戏一样，所以我接下来只想一次调用一个特定的问题。假设我只想显示来自id=1的问题/答案，json文件如下所示：

[{
    "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"
}]

我的json文件中的每个后续问题都遵循这个结构，因此我认为我需要更改items.push函数中的"id“属性。通过查看一些文档，我看不到如何将该特定值集成到我的函数中。

你知道如何做到这一点(使用id只拉出第一个问题+更正)，或者用不同的方法完成吗？

Answer 1

请检查此链接，我已为下一步添加了类似于上一步按钮功能的功能。

// HTML代码示例

<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代码

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); 
}
});

Answer 2

一种方法是使用数组可用的filter method。我们会把它封装在一个函数中，这样你给出一个id和一个琐事列表，它就会挑选出有这个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

为了简要描述它的工作原理，items.filter将返回返回值为true的所有项的数组--在本例中为item.id == id。理想情况下，这将是一个只有一个元素的数组。如果由于某种原因不是，当有重复的id时，它将返回第一个trivia元素；如果没有带有该id的trivias，则返回undefined。当然，您可以通过更改return filtered[0]将此行为更改为您喜欢的任何内容。