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文件中的每个后续问题都遵循该结构，所以我的信念是我需要更改＆＃34; id＆＃34; items.push函数中的属性。从查看一些文档，我无法看到如何将该特定值集成到我的函数中。

知道如何做到这一点（使用id只提取第一个问题+ correcta）或用不同的方法完成吗？

Answer 1

检查此链接DEMO FIDDLE我添加了下一步按钮功能的功能。

//示例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 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); 
}
});

Answer 2

一种方法是使用数组可用的filter method。我们将它包装在一个函数中，以便您提供一个id和trivias列表，然后选择具有该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或者undefined时，如果没有具有该id的trivias，它将返回第一个trivia元素。当然，您可以通过更改return filtered[0]来改变此行为。

通过ID从我的js中的JSON文件调用特定对象

2 个答案: