SHARE

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

Learn more about JSON – http://www.w3schools.com/json/json_sy
JSON Lint – http://www.jsonlint.com

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:
+ Source files on GitHub – https://github.com/iamshaunjp/angular-js-playlist
+ Atom text editor – https://atom.io/

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

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5Y

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

https://www.youtube.com/playlist?list

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

https://www.youtube.com/playlist?list

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

For more front-end development tutorials & to black-belt your coding skills, head over to http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

21 COMMENTS

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

  2. I have been trying to do this with an actual service function(all three variations) in order to keep my controller out of the business logic. Ive not had much luck yet, could you point me in the right direction on that? Now I realize that I should just do what works but Im just trying to get a better feel for (custom)services. I nailed routes first try and it has been said that routing is the most confusing aspect, I have personally found services much more complicated.

    But yeah, right on for the video, ur stuff is always helpful.

  3. Hey Shaun,
    how can we get the JSON data from a node server using http service? Instead of having a data In some file can we get the directly from the node response object

  4. I'm getting this weird error I was hoping you can help me with.. the error is " Error: [orderBy:notarray]". Can anyone help with this?? It only appeared after I moved the array to the $http service

  5. If you are having trouble try:

    $http.get('data/ninjas.json').then(function(response){
    $scope.ninjas = response.data;
    });

    Angular just changes a little over time.

  6. Getting below error when I did this using different data:

    angular.js:14516 Error: [orderBy:notarray] Expected array but received: {"data":[{"name":"orange","vitamin":"C","price":100,"available":true},{"name":"apple","vitamin":"A","price":200,"available":true},{"name":"watermelon","vitamin":"B","price":2000,"available":true}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"data/fruits.json","headers":{"Accept":"application/json, text/plain, /"}},"statusText":"OK"}
    http://errors.angularjs.org/1.6.3/orderBy/notarray?p0=%7B%22data%22%3A%5B%7…son%2C%20text%2Fplain%2C%20*%2F*%22%7D%7D%2C%22statusText%22%3A%22OK%22%7D
    at angular.js:66
    at angular.js:22206
    at fn (eval at compile (angular.js:15351), <anonymous>:4:300)
    at regularInterceptedExpression (angular.js:16459)
    at Scope.$digest (angular.js:18002)
    at Scope.$apply (angular.js:18280)
    at done (angular.js:12378)
    at completeRequest (angular.js:12604)
    at XMLHttpRequest.requestLoaded (angular.js:12532)

  7. Hey Shaun, thanks for this awesome course, I have a query though I used the code $http.get('data/ninjas.json').then(function(response){
    $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??

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

    $http.get('data/employees.json').then(function(data){
    //console.log(data);
    $scope.employees = data.data;
    });

    Let me know if I'm wrong somewhere πŸ™‚

    Thanks.

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

  10. i have question….
    i did everything like you in this tutorial (and others also)…and my app is not runing when i add http service. in controller..i'm getting error…
    Error: $http.get(…).success is not a function
    but if i change success with "then"and in function pass response
    and in $scope.ninjas "save" response.data then it works..do you
    know why????

LEAVE A REPLY

Please enter your comment!
Please enter your name here