Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Ryan Hellerud
Ryan Hellerud
3,635 Points
Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

Using Jquery to get json file

I'm trying to use $.getJson function to grab a json file which is in an array format: [{"class": "English"},{ect},{ect}]

but when I use the method a var classdata =$.getJSON("../courses/coursedata.json"); it is not returning anything, do i need a function if i just want to return the json as an array?

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

so actually it is getting the file successfully it seems, the thing is, im trying to use an angular directive of ng-repeat to itterate over the supposed array it should return but it is not working. So Do I have to manually do a function to put it into an array even though the json is [ {},{},{}] format?

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Ryan Hellerud

The $.getJSON() method requires a function as a second argument. This should do what you are looking for.

$.getJSON("../courses/coursedata.json", function (data) {
  var classData = data;
 // do something with that data -- must be in this callback
});

You need the function because AJAX is "asynchronous" -- meaning the call for the resource is sent out, but the program keeps running. When the data is returned the callback function is executed. In other words you can't directly set a variable to the value of the $.getJSON() method, because there's nothing to put into the variable until the data is returned. In addition, all of the programming that uses the returned data must be in the callback, because the callback is the code that runs when the data is returned. Trying to access the data outside of the callback won't work,.

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

Thanks I tried it like that but it didn't work as far as working with angular. It made a success get because I checked the console XRH blah. But Im trying to use it with an angular ng-repeat in the dom so does that mean I need to convert the data to an array even though the json data is surrounded with '[]', ie [{ob1},{ob2},{obj3}]?

Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points
Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points

you shouldnt use jquery to receive json data in angular. Try using the build in http service provider built in angular https://docs.angularjs.org/api/ng/service/$http

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

For AJAX with Angular, you should be using Angular's $http service, not jQuery's $.getJSON.

See the Angular docs: https://docs.angularjs.org/api/ng/service/$http

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

I'm trying to add something like

$scope.classes = $http.get('../courses/coursedata.json').success(function(data){
  var classData= data;
  return classData;
  });

but getting $http is undefined, it looks like there is a lot more to do to set up with angular?