Question

我尝试使用JQuery的ajax方法从JSON文件中获取数组。具体来说，我想在文档加载上发出ajax请求，并在其他函数中使用获取的数据。这是我的代码：

$(document).ready(function() {
  getJSON();
  clickEvents();
});
function getJSON() {


$.getJSON('goods.js', function(data) {
  crazyFun(data.Goods);
  addScores(data.karma);
 });
}
}
function addScores(karma) {
 $('#karmaYinYangScore').append(karma[0].karmaYinYangScore);
 $('#KarmaGiveScore').append(karma[0].KarmaGiveScore);
 $('#KarmaTakeScore').append(karma[0].KarmaTakeScore);
 $('#ItemsGiveScore').append(karma[0].ItemsGiveScore);
 $('#ItemsTakeScore').append(karma[0].ItemsTakeScore);
}
function crazyFun(Goods) {
for (var i = 0; i < Goods.length; i++) {
        var alpha= $('#template').clone();
        alpha.removeAttr('id');
        alpha.find('div.picture').attr('id', Goods[i].picture);
        alpha.find('h2').html(Goods[i].header);
        alpha.find('p').html(Goods[i].text);
        alpha.find('div.notification').attr('id', Goods[i].notification);
        $('#repeater').append(alpha);
}

}

karma和Goods是JSON文件中数组的名称。

我做错了什么？

这是我的业力的JSON数组：

{
Goods : [{
    "header": "Apple",
    "text": "hi"
    "picture": "appleImage",
    "notification": "appleNote"


}, {

    "header": "Pear",
    "text": "hi",
    "picture": "pearImage",
    "notification": "pearNote"

}, {

    "header":hi",
    "picture": "bananaImage",
    "notification": "bananaNote"

}, {

    "header": "Dog",
    "text": "hi",
    "picture": "dogImage",
    "notification": "dogNote"

}, {

    "header": "Cat",
    "text": "hi",
    "picture": "catImage",
    "notification": "catNote"

}, {

    "header": "Snake",
    "text": "hi",
    "picture": "snakeImage",
    "notification": "snakeNote"

}], 

karma : [{
    "karmaYinYangScore": "200",
    "KarmaGiveScore": "40",
    "KarmaTakeScore": "99",
    "ItemsGiveScore": "20",
    "ItemsTakeScore": "77"
}];

}

Answer 1

我只能猜测你的数据是什么样的，但既然你说“业力和商品是数组的名称”，我会假设我们正在讨论这样的事情：

{
 karma: [{
          karmaYinYangScore:'some value',
          KarmaGiveScore:'some value',
          KarmaTakeScore:'some value',
          ItemsGiveScore:'some value',
          ItemsTakeScore:'some value'
         }
        ],
 Goods: ['more','array','values']
}

如果是这种情况，我们在您的代码中遇到了一些问题。

首先，getJSON返回一个数据结果，因此您应该仅引用返回的数据。

function getJSON() {
$.getJSON('goods.js', function( data ) {
    crazyFun( data.Goods ); // reference Goods array from data response
    addScores( data.karma );  // reference karma array from data response
    });
}

然后，您的.addScores()函数不接受参数。你需要一些引用来接收传递的数组。

  // Reference to the array being passed to the function
  //   ---------------v
function addScores( karma ) {
    $('#karmaYinYangScore').append(karma[0].karmaYinYangScore);
    $('#KarmaGiveScore').append(karma[0].KarmaGiveScore);
    $('#KarmaTakeScore').append(karma[0].KarmaTakeScore);
    $('#ItemsGiveScore').append(karma[0].ItemsGiveScore);
    $('#ItemsTakeScore').append(karma[0].ItemsTakeScore);
}

这是我看到的唯一错误。除此之外，解决方案取决于响应的实际数据结构。

Answer 2

根据jQuery关于getJSON函数（http://api.jquery.com/jQuery.getJSON/）的文档，您的回调参数似乎具有误导性。你的回调......

function(Goods, karma) {
    crazyFun(Goods);
    addScores(karma);
}

...似乎期望将数据数组自动传递给它，但jQuery实际上将整个JSON结果作为第一个参数传递，并将请求的状态作为第二个参数传递，而不管JSON如何结构化。你的回调应该看起来更像这样：

function(json, status) {
    crazyFun(json.Goods);
    addScores(json.karma);
}

这假定您的JSON格式正确，并且“Goods”和“karma”属性是根对象的属性。如果您的JSON结构不同，则可能需要修改回调。

使用JQuery .getJSON读入数组

2 个答案: