CODEWITHSUNDEEP
jsonparsinggetjson
rd42
rd42

Reputation: 3594

JQuery JSON from file to object

I copied this from the jquery site. I'm trying to learn how to get json data to a web page. The date has validated on: http://jsonlint.com/

The results from running the my script are: [object Object] [object Object] [object Object] [object Object] [object Object]

Do I need to parse the data or does getJSON do that.
This is the code I'm using:

<!doctype html> 
<html>
<head>

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

    <script type="text/javascript">
$.getJSON('data.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});
    </script>
</head>
<body>

</body>
</html>

Troubleshooting tips would be great and of course an answer would be great too!

data.json

[
    {
        "bytes": "476.577044"
    },
    {
        "bytes": "136113.5289"
    },
    {
        "bytes": "118870.8151"
    },
    {
        "bytes": "55001.67852"
    }
]

console.log(data) response:

[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]

Upvotes: 0

Views: 2637

Answers (2)

Santiago Angel
Santiago Angel

Reputation: 1127

I had the same problem. I solved it by putting the JSONP object in console.log() and then looking at the tree in Chrome's developer tools. There I realized that "object" was just the name the parser gave to all the different objects inside the JSON file, so you have to account for that when fetching the values. 

$(document).ready(function(){
    $.getJSON('data.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li >' + data.object.bytes + '</li>');
      });

      $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body');
    });
});

You data you want is in a key:value pair inside an object called "object which is inside an array(this is what is being cycled through when you do $.each())

So you have to tell JQuery to look inside the object and then tell it what key to look up.

I didn't put any ID's as I'm not really sure what you wanted them to be. Did you just want every element to have "bytes" as the ID? ID's should be unique (at least according to this http://css-tricks.com/the-difference-between-id-and-class/)

If what you want is a class so that you can do CSS/JQuery over the whole batch then you could try something like '<li class ="' + object.key + '">'

Upvotes: 2

nathanjosiah
nathanjosiah

Reputation: 4459

Pretty close, try this: (as long as the file "data.json" is a valid file)

$(document).ready(function(){
    $.getJSON('data.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
      });

      $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body');
    });
});

EDIT

The way your json is setup, $.each is going to iterate the outer array containing the objects. Which makes the key a numeric index, and the val the actual object. With that said, changing the $.each part to look like this: 

$.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val.bytes + '</li>');
});

should do the trick

(sidenote: id's should not begin with a number)

Upvotes: 1

Related Questions