AngularJS Tutorial #17- JSON and $http

Hey gang, in this AngularJS tutorial, I'll talk you through how to retrieve external JSON data by using the $http service.

Hey gang, in this AngularJS tutorial, I'll be introducing you to filters and how we can use them to change the way our data is displayed to a user. Filters can be used in conjunction with ng-repeat, or directly on the expression itself. We use Angular filters to do things like ordering a list of items alphabetically, or by type, or to display numbers as a currency.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[neenaw]

If you are having trouble try:


$scope.ninjas = response.data;
});

Angular just changes a little over time.

[jheelmonty]

For the newcomers in AngularJS. While using AngularJS 1.6v a bit of syntax is changed. You need to write this:
{
$scope.ninjas = response.data;
});

instead of this:
{
$scope.ninjas = data;
});

[frootEpebbles]

I'm new to Angular and happened to stumble upon this video, I learned so much that I'll check out the rest of this series and subscribe to your channel. Thanks so much!

[moaazbhnas]

Hey guys,
.success() is deprecated.
use .then() instead. When you use this method, it passes a complete HTTP response which contains the data we want to the callback function instead of just the data.
To retrieve data from that response:
{
$scope.friends = response.data;
});
Good Luck!

[andreiaquino]

Hi the net ninja, thanks for the clear explanation. This is GOLD :)


I got few errors when I used the codes in the video. This fixed the app in my machine:
- change ".success" to ".then"
- array problem when loading the $scope.ninjas = data;, so i console.log() the object, I ended up using $scope.ninjas = data.data;


Thanks again! :)

[chaseklingel]

Your videos are great! Thank you for taking the time to put this together.

[samuelbitrus]

hey guys if you did everything correctly and you are still getting an error, try renaming your json file from ninjas.json to something else. it worked for me. Cheers

[Atpugtihsrah]

Hi,

After making the changes suggested by Pablo, my code gave the error which said something like "json file must be an Array to orderBy to work." But my json file was already with-in the [ {}, {}, {} ] (Array braces). Looking further, I found that the data being sent is actually an object which has 2 properties 'config' and 'data' out of which 'data' was an array. So, after further changing the code to data.data, it worked.
Finally, something like :


//console.log(data);
$scope.employees = data.data;
});

Let me know if I'm wrong somewhere :)

Thanks.

[NitinGupta-husy]

Thank you. I have worked on angularjs. Your tutorial are very easy and straight forward. Had good revision.

[mariavillanueva]

this one works for the success method error and the array thing

(response) {
$scope.ninjas = response.data;
});

[binayakgshankar]

What an explanation. U saved my job, man !

[AVYFLUX]

In case anyone is watching this now... the $htpp.success() method is deprecated and might throw errors. The following code can be used instead...


(response){
console.log(response.data)
$scope.ninjas = response.data;
}, function (error){

});

[inframatic]

Your source files are empty, with no sign of JS. Am I missing something?

[roryangus]

The code below works and also has some call error handling features. Have a play with different scenarios such as; The file name correct, file name incorrect, corrupt JASON data by adding some '//' to the first line of the JSON file to stop it working. Look at the different error messages you get and the different objects that are output to the console.

$http.get('data/ninjas.json').then(successCallback, errorCallback);

function successCallback(response){
//success code
$scope.ninjas = response.data;
console.log(response, 'Data that was in the successful response call'); //outputs a value to the console. Inspect element to see it.
alert("Got the data!"); //outputs a value to the user on the screen
}
function errorCallback(error){
//error code
console.log(error, 'Can not get data.'); //outputs a value to the console. Inspect element to see it.
alert("Can not get the data - Check the JSON file is valid"); //outputs a value to the user on the screen
}

[CipriValdezate]

Very good tutorial! Good work, we are grateful!

[bijay]

Hey Shaun, thanks for this awesome course, I have a query though I used the code
$scope.ninjas = response.data;
});

as suggested in few comments below but still for me ninja list is not getting displayed. But when I change $http.get('data/ninjas.json') to $http.get('ninjas.json') and put ninjas.json it works. No idea why, I tried this with Brackets also and still the same thing, anyone any idea why??

[theRINspace]

If some of you guys have issues having with console.logging the JSON data, make sure you're on the ninja list page instead of the homepage.

[sandiledamuziqal]

i have a problem, I can push data into JSON but when I refresh the page the data disappears

I want to store the data forever in the JSON file

[basith]

don't forget to check the data after fetch with $http by console.log(data). if the result of your response give the object (response status, header, statusText and data), you must modify like this to get all ninjas data $scope.ninjas = data.data

[arabbatehafsa]

how to add a new ninja in the json file using the form ?