JQuery JSON from file to object

Question

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"}]

Santiago Angel · Accepted Answer · 2012-12-06 12:42:26Z

2

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 + '">'

edited Dec 6, 2012 at 12:42

answered Dec 6, 2012 at 9:47

Santiago Angel

1,13715 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Santiago Angel Over a year ago

To the OP, If this is the best answer, could you please mark it as such? Thanks.

nathanjosiah · Accepted Answer · 2012-04-09 14:56:44Z

1

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)

edited Apr 9, 2012 at 14:56

answered Apr 9, 2012 at 14:36

nathanjosiah

4,4594 gold badges38 silver badges47 bronze badges

7 Comments

Eliran Malka Over a year ago

it has the same effect, plus, you didn't answer the question.

rd42 Over a year ago

Same Result. The data.json is a real file on the same server avoiding the cross domain stuff. In the firebug I see the get response has the correct data in it, it just churns out the [object Object] response for each JSON entry.

nathanjosiah Over a year ago

what does it output when you try to console.log(data) in your callback, mainly, what does your json look like

rd42 Over a year ago

Thanks for the console.log(data) trick, it is indeed getting the correct information from the JSON file.

nathanjosiah Over a year ago

what does your json look like

|

Collectives™ on Stack Overflow

JQuery JSON from file to object

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related