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
– Arun P Johny, Commented Mar 18, 2015 at 1: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
– Toshi, Commented Mar 18, 2015 at 1:28
@Toshi try adding complete: function(xhr, status){ console.log(status); } to your ajax call after the success one. — zgood
– zgood, Commented Mar 18, 2015 at 1:42
Just try ` $.getJSON('/api/data.json',function(data){ console.log(data); }) ` — Linoy
– Linoy, Commented Mar 18, 2015 at 1:59
Is data JSON ? Should id, name, lastname, school be surrounded by double-quotes ? ; "id" , "name" , "lastname" , "school" ? See stackoverflow.com/questions/8294088/javascript-object-vs-json , benalman.com/news/2010/03/theres-no-such-thing-as-a-json — guest271314
– guest271314, Commented Mar 18, 2015 at 2:25

MyTwoCents · Accepted Answer · 2015-03-18 04:28:17Z

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, 2015 at 4:28

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

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

4 Comments

Toshi Over a year ago

Yes I think that might be it. I will try to stringify the data that is being returned... THanks

Toshi Over a year ago

I am thinking that I need to possibly convert the JSON data into a javascript object?

MyTwoCents Over a year ago

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 .....

Toshi Over a year ago

@ Ashish451 - Thanks. In that case I am assuming I should use .parseJSON to convert the data to a javascript object.

hamed · Accepted Answer · 2015-03-18 04:28:31Z

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); } });

Toshi · Accepted Answer · 2015-03-20 02:09:56Z

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>'); }); } }); }); });

Collectives™ on Stack Overflow

Simple Jquery Ajax Get JSON data function

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related