Simple Jquery Ajax Get JSON data function

Question

I am trying to create a simple little jquery function that pulls JSON data from the url, then goes through each of the objects. All I want to do is to console.log the object.name so that I know that it is working. So far it is not working :( I checked the network tab in Chrome's Developer console and in the response it shows the json data was returned. The problem is I just can't get the object.name to console.log. If someone could help point out the problem I'd be greatful.

Here is the script:

function getJSON(){
            $.ajax({
                type: 'GET',
                url: '/api/data.json',
                success: function(data){
                    $.each(data, function(index, object){
                        console.log(object.name);
                    });
                }
            });
        }
getJSON();

Here is the JSON data:

[
 {
  id: 1,
  name: "Greg",
  lastname: "Sugaro",
  school: "Georgia Tech"

 },
 {
  id: 2,
  name: "Mike",
  lastname: "Wilder",
  school: "UGA"
 }
]

do a `console.log(data)` before the each call and see whether that is getting called... also check your browser console to see whether any error is getting logged — Arun P Johny, Mar 18 '15 at 01:24
@ Arun : I tried the console.log(data) before the $.each and nothing was outputted. There are no errors being logged in the bowser console. — Toshi, Mar 18 '15 at 01:28
Nothing was outputted when you did a `console.log(data)` in your success return? So you aren't getting your array of objects? — zgood, Mar 18 '15 at 01:37
@zgood This is what is confusing me. I checked the network tab and the response shows the json data being returned from the server. For some reason I just can't get it to console.log onto the browser. — Toshi, Mar 18 '15 at 01:39
@Toshi try adding `complete: function(xhr, status){ console.log(status); }` to your ajax call after the `success` one. — zgood, Mar 18 '15 at 01:42
Also it's worth adding an error callback and putting at least "console.log('an error occurred')". — Stephen L., Mar 18 '15 at 01:44
@zgood - I tried that and I got an error: Unexpected Identifier. — Toshi, Mar 18 '15 at 01:49
@Stephen - it is telling me a parse error occured... No clue... — Toshi, Mar 18 '15 at 01:55
Just try ` $.getJSON('/api/data.json',function(data){ console.log(data); }) ` — Linoy, Mar 18 '15 at 01:59
It shows a 'parserror' occurred so I'm assuming the browser is having trouble parsing the data... I checked the format of the JSON data and it seems like the data format is correct... — Toshi, Mar 18 '15 at 02:21
Is data `JSON` ? Should `id`, `name`, `lastname`, `school` be surrounded by double-quotes ? ; `"id"` , `"name"` , `"lastname"` , `"school"` ? See http://stackoverflow.com/questions/8294088/javascript-object-vs-json , http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/ — guest271314, Mar 18 '15 at 02:25
@guest271314 - so it looks like the keys in JSON data must be in parenthesis.. So I changed my JSON data file to reflect this.. — Toshi, Mar 18 '15 at 02:38

score 0 · Answer 1 · answered Mar 18 '15 at 04:28

0

When I use your JSON and $.each function works fine for me here's FIDDLE

So i guess there is some problem with your ajax call 1. either return type is not in JSON format. 2. if its json Use json.stringify(data) to see content

In previous comment you have mentioned "I tried the console.log(data) before the $.each and nothing was outputted" so that means your ajax call is not returning any response. Check your get call

answered Mar 18 '15 at 04:28

MyTwoCents

7,284
3
24
52

Yes I think that might be it. I will try to stringify the data that is being returned... THanks – Toshi Mar 18 '15 at 18:57
I am thinking that I need to possibly convert the JSON data into a javascript object? – Toshi Mar 18 '15 at 21:01
Am not sure about that, as "Javascript object is a data type in Javascript - it makes sense only in Javascript". but "JSON is simply stored inside a string" To make it useful, the JSON string can be parsed to produce an object in any language. If you are okay with it go with javascript ..... – MyTwoCents Mar 19 '15 at 05:31
@ Ashish451 - Thanks. In that case I am assuming I should use .parseJSON to convert the data to a javascript object. – Toshi Mar 19 '15 at 21:01

score 0 · Answer 2 · answered Mar 18 '15 at 04:28

0

Try this:

 $.ajax({
   type: 'GET',
   url: '/api/data.json',
   success: function(data){
    objects = $.parseJSON(data)
    for(i=0; i<data.length; i++)
        console.log(objects[i].name);
     }
 });

answered Mar 18 '15 at 04:28

hamed

7,939
15
60
114

score 0 · Answer 3 · answered Mar 20 '15 at 02:09

SO.... I got the code to work!! See below!

$(document).ready(function(){
            $('.button').click(function(){
                $.ajax({
                    type: 'GET',
                    url: '/api/data.json',
                    success: function(data){ 
                        console.log("success", data);
                        
                        $.each(data, function(index, object){
                            $('#data-div').append('<p>' + object.name + '</p>');
                        });
                    }
                });
            });
        });

Simple Jquery Ajax Get JSON data function

3 Answers3