Использование JQuery .getJSON для чтения в массиве

Question

Я пытаюсь получить массив из файла JSON, используя методы ajax JQuery.В частности, я хочу сделать 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);
}

}

Карма и Товары - это имена массивов в файле 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 структурирован по-другому.