Home/ Questions/Q 7754837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:24:50+00:00

I copied this from the jquery site. I’m trying to learn how to get

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0