Using JQuery .getJSON to read in an array

Question

Hi,

I aam trying to GET an array from a JSON file using JQuery's ajax methods. Specifically, I want to make the ajax request on document load and use the acquired data in other functions. Here is my code:

$(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 and Goods are the name of the arrays in the JSON file.

What am I doing wrong?

Here is my JSON array for karma:

{
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

According to jQuery's documentation on the getJSON function (http://api.jquery.com/jQuery.getJSON/), your callback's parameters appear to be misleading. Your callback...

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

...appears to be expecting the arrays of data to be passed to it automatically, but jQuery actually passes the whole JSON result as the first parameter, and the status of your request as the second parameter, regardless of how the JSON is structured. Your callback should probably look more like this:

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

This assumes that your JSON is well formed, and that the "Goods" and "karma" properties are properties of the root object. You may need to modify the callback if your JSON is structured differently.

Answer 2

I can only guess what your data looks like, but since you said "karma and Goods are the name of the arrays", I'm going to assume we're talking about something like this:

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

If that's the case, we've got a few issues in your code.

First, getJSON returns one data result, so you should be referencing only that data returned.

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

Then, your .addScores() function doesn't accept a parameter. You need some reference to receive the array being passed.

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

These are the only errors I see. Beyond that, the solution depends on the actual data structure of the response.