Question

I’m trying to get JSON data to turn it into html but the JSON code I have access to does not show an array to use as the data key.

Does anyone know how I can go about getting this data? My data values are coming up “undefined” in the HTML.

Sample data:

[ { "stuff" : {
        "categories" : null,
        "value-1" : "a string of cool text to display",
        "value-2" : 3,
        "value-3" : null,
        "value-4" : [  ],
        "value-5" : 58505,
        "value-6" : true,
        "value-7" : false,
  } },

  { "stuff" : {
        "categories" : null,
        "value-one" : "another string of cool text to display",
        "value-two" : 3,
        "value-three" : null,
        "value-four" : [  ],
        "value-five" : 58505,
        "value-six" : true,
        "value-seven" : false,
  } }

]

Sample code:

$(function() {

    $.getJSON( "sample.json", function(data) {

        $.each(data, function() {

            $('<div></div>')
              .hide()
              .append('<p>' + this.value-one + '</p>') 
              .appendTo('#awesome')
              .fadeIn();
        });

    });

});

Answer 1

Try:

    $.each(data, function(key, value) {
        $('<div></div>')
          .hide()
          .append('<p>' + value.stuff['value-one'] + '</p>') 
          .appendTo('#awesome')
          .fadeIn();
    });

Update: When object key has - in it, you can’t access it with object.value-one, you must do object['value-one'].