使用 JQuery .getJSON 读取数组答案

【问题标题】：Using JQuery .getJSON to read in an array使用 JQuery .getJSON 读取数组
【发布时间】：2010-07-22 03:04:03
【问题描述】：

我正在尝试使用 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"
}];

}

【问题讨论】：

您的 JSON 文件是什么样的？你有什么问题？你的回调函数的定义是错误的，但是没有看到JSON就没什么好说的了。
JSON 结构良好。当我在 html 文件中调用 JSON 时，一切正常。
没关系。为了帮助您，我们需要知道它的外观。
好的，谢谢。如果这是goods.js，则此文件不是 JSON 文件。它是 JavaScript。如果你想使用getJSON，这个文件需要包含一个像{"karma": [...], "goods": [...]}这样的JSON字符串

标签： javascript jquery json

【解决方案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);
}

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

【讨论】：

感谢您的帮助。我仍然无法让它工作......我假设我不需要在我的 HTML 中为 JSON 文件进行引用，对吧？
我已经更新了我的代码，以在我的原始帖子中反映您的建议。
@fordays - 不，你没有。但是，如果您在问题中发布的响应是收到的实际响应，它将失败，因为 JSON 数据不能以 var karma = 开头。
你应该完全摆脱变量赋值。但还有一件事。 Goods 数据在哪里？ crazyFun() 函数在哪里？
我添加了所有代码。在我的 Safari 调试控制台中，Goods.js 文件显示在 Elements 部分，因此肯定会调用它，但看起来它们并没有在函数 crazyFun 和 addScores 中使用。

【解决方案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 结构不同，您可能需要修改回调。

【讨论】：