AngularJS Tutorial #17- JSON and $http

[@neenaw]

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.

[@SimPwear84]

Every new update /version they might change how things are done. Just follow the tutorial series using version 1.5 You can later learn how to do the same thing with a later version

[@BrunolFornazari]

The reason is that in 1.6+ versions of angular.js, the method get returns a promise instead of any XHR response object as older versions did

[@warchild2726]

You are lifesaver

[@marcello4050]

Mah man, You're a hero

[@xlong2842]

Thank u sir

[@jheelmonty]

For the newcomers in AngularJS. While using AngularJS 1.6v a bit of syntax is changed. You need to write this: $http.get('data/ninjas.json').then(function(response) { $scope.ninjas = response.data; }); instead of this: $http.get('data/ninjas.json').success(function(data) { $scope.ninjas = data; });

[@sandiledamuziqal909]

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

[@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!

[@moaazbhnas886]

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: $http.get('data/friends.json').then(function(response) { $scope.friends = response.data; }); Good Luck!

[@sandiledamuziqal909]

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

[@andreiaquino8994]

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! :)

[@thekuzicartoon]

ya, data.data worked for me. along with then instead of success. I am using angular v1.8.0

[@chaseklingel9080]

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

[@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 : $http.get('data/employees.json').then(function(data){ //console.log(data); $scope.employees = data.data; }); Let me know if I'm wrong somewhere :) Thanks.

[@MrChachoo]

check out the comment by Hendra Widjaja above.

[@lungisanigwala4973]

I can tell you.. it works my guy

[@edwinaritama]

i tried yours, and it works on me thanks

[@NitinGupta-hu1sy]

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

[@mariavillanueva9576]

this one works for the success method error and the array thing $http.get('data/ninjas.json').then(function (response) { $scope.ninjas = response.data; });

[@reut1990]

very helpfull:)

[@Yv3tt3u]

Thanks! This worked for me.

[@JeremiahKellogg]

Yes! Thank You!

[@selvoselvo1]

yap also had "success is not a function", works this way

[@rishabhpatel263]

that indeed worked thanks. But can you tell me why we are writing response.data instead of just response.

[@binayakgshankar9188]

What an explanation. U saved my job, man !

[@samuelbitrus1667]

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

[@inframatic]

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

[@roryangus1480]

Hi, the code in the tutorial is for an older version of Angular. If you want to understand the issue and also how to fix it, then have a look at this thread... stackoverflow.com/questions/41169385/http-get-success-is-not-a-function 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 }

[@amazinghenry8893]

much better

[@CipriValdezate]

Very good tutorial! Good work, we are grateful!

[@quanlamtruong5870]

the best tutor video so far

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

[@arabbatehafsa7526]

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

[@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... $http.get('data/ninjas.json').then(function (response){ console.log(response.data) $scope.ninjas = response.data; },function (error){ });

[@bluesinmahblood]

Spent a couple of hours yesterday trying to debug this.

[@funtravellers7754]

very nice tutorial

[@bijay7]

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

[@shubhamgarde6830]

hello, you insert the file locaton of your ninjas.json eg: i stores my json file in C:/xampp/htdocs/project/js/ninjas.json so i will insert the location as $http.get("js/ninjas.json") so basically, you dont have a folder named data so angular is not able to find the json file

[@sandiledamuziqal909]

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

[@poul_yvarov]

Thank you! Very useful!

[@rutpshah]

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"} 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), :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)

[@timojedai6576]

Same problem and no way to resolve it :/

[@sarthaksaxena1093]

$http.get("data.json").then(function(data){ console.log(data.data); $scope.ninjas = data.data; }) Do this

[@oscardbg9654]

@@sarthaksaxena1093 thanks, the success function no longer works, use then instead and data.data solves the problem

[@devonterobinson1842]

I have tried this Node.js and got a cross site scripting error. How are you accessing the Json file?

[@paritoshfulara]

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

[@basith237]

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

[@abhineet3695]

For angular 1.6.x use: $http.get('data/ninja.json') .then(function(success){ $scope.ninjass = success.data; }, function(error){ console.log("error loading ninja.json"); });

[@visibletoanyone1508]

I used .success as well as .then but none of the above shows the list. Can you help me where I am stuck?

[@darkthrongrising5470]

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.

[@thegreenman9000]

For modern versions of Angular use: " $http.get('data/ninjas.json') .then(function sucessCallback(response){ $scope.ninjas = response.data; }, function errorCallback(response){});"

[@naveenspv]

we are getting data in json format how it is parsed as an object

[@tubeMonger]

Would it be possible to create a custom service and make reusable $http functions for GET and POST to be used in controllers?

[@shubhamgarde6830]

I want to retrieve a single entry , like enter and ID and everything related to that ID is retrieved. HOW DO I DO IT?

[@ivandelvalleabuja2220]

Did you solve it?

[@JamesJohnAgar]

What about connecting to backend databases ?

[@Nickopanther00]

If anyone is working in Angular JS 1.7+ and you're having an issue with the code: $http.get('data/ninjas.json').success(function(data) { $scope.ninjas = data } then type it this way instead: $http.get('data/ninjas.json').then(function(response) { $scope.ninjas = response.data; });

[@thecodecatalyst]

Use then instead of success in versions +1.6

[@sandiledamuziqal909]

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

[@ddaki]

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

[@nexsklrs]

look at the comment from @Pablo Zabala

[@hendrawidjaja490]

/* Simple GET request example with promises */ $http({ method: "GET", url: "./data/ninjas.json" }).then(function successCallback(response) { /* this callback will be called asynchronously when the response is available */ $scope.ninjas = response.data; }, function errorCallback(response) { /* called asynchronously if an error occurs or server returns response with an error status. */ console.log("Error " + response.status + ": " + response.data) }); Don't forget to add $http on the controller

[@AsheeshChaudhary]

The .success and .error methods are deprecated and have been removed from AngularJS 1.6. Use the standard .then method instead.

[@hendrawidjaja490]

any life example or code?

[@leonardoholanda3879]

Hi, I try $http({ method: "GET", url: "data/ninjas.json" }).then(function successCallback(response) { $scope.greeting = response.data; }, function errorCallback(response) { console.log("Error " + response.status + ": " + response.data) }); and console return angular.js:10514 XMLHttpRequest cannot load file:///C:/Users/ideia/Workspace/Angular/estudos_com_angular_1/aula-comecando-com-angularjs-master/data/greeting.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension. what am i doing wrong?

[@harshitha94]

i have a query in redis connection to nodejs .. can i find some help

[@fffhshf345]

I have a problem, it does not show ninjas on my directory view. Any tips?

[@MrUaliev]

try using .then instead of .success when you get data from http. Also in the function it should be $scope.ninjas = response.data; (not just data, you should access it) I guess it's the differences between older and newer versions of angularjs

[@ChongDelro]

i tried but when I go to the list of ninjas it shows nothing anymore....

[@AsheeshChaudhary]

The .success and .error methods are deprecated and have been removed from AngularJS 1.6. Use the standard .then method instead.

[@chetanbhat77]

"TypeError: $http.get(...).success is not a function angular.min.js:125" getting this error on the console, the data is not being displayed.

[@shajahanj2646]

use .then

[@briangoodman9169]

Hmm printing to the console didn't work for me

[@XFDW]

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

[@shaikhabdulsohail3982]

use .then instead of success for latest version in order to overcome this error - "$http.get(...).success is not a function"

[@larsvargstrand6749]

Like many said, ".success" is deprecated, ".then"... instead. Like so: $http.get('data/ninjas.json').then(function(response){ $scope.ninjas = response.data; More info at stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6

[@mkaufmandev]

The heck is Haitch-ttp?

[@Spok2go]

Foonction, Heitch-ttp

[@alexpham481]

LOL, great video tho.

[@ПавелЕфименко-й1п]

just wait till he say "bhhhowser") just funny english accent)

[@explosoratory]

I had two errors on this tutorial and found a solution for this. I share that for the people like me. >< * Error 1. there is no function $http.get(..).suceess * Solution. please change 'success to then' like below. $http.get('data/ninjas.json').then(function(data){ * Reason. you might use updated version. ----------------------------------------------------------------------------------------------------------------- * Error 2. orderBy:notarray JSON * Solution. Change $scope.ninjas = data; to $scope.ninjas = data.data; * Reason - I found this on stackoverflow. ng repeat works with an arrays but as per the response getting from the API in then() method is not the data itself but it is having a property named as data which is the actual array that you have to pass in ng-repeat. (stackoverflow.com/questions/41315423/expected-array-but-received-json-angularjs-error) ++ Thank you Ninja, this video is really helpful. ;)

[@FavouriteVid]

your reply helps :) thanks for the extra details

[@AgungPrasetyo2112]

$http.get('data/ninjas.json') can we write source from external domain/server, like $http.get('otherdomain/data/ninjas.json') ??

[@asimov1979]

For anyone using later versions of AngularJS stackoverflow.com/questions/41169385/http-get-success-is-not-a-function

[@Desdroyer24]

Today July 16th , 2019 $http.get().success.(...) is obsolete, with angular version > 1.6, and actually 1.7, instead use: $http.get('path') .then(function(response) { $scope.ninjas = response.data; });

[@PabloZabala1820]

HI, anohter way is to use "then" function to capture the possible error.... $http.get("url", dataToSend).then( function(response) { // Success!!! $scope.ninjas = response; }, function(error) { // a 500 error ocurred or any other.... $scope.ninjas = []; // throw error message.... }); Sory for my english ;)

[@Kirst817]

The .success has been deprecated.

[@OMGDrAcula]

Since it has been deprecated, is what Pablo posted the correct way to do the request now?

[@glennesavage7443]

Using .then instead of .success is actually straight forward. Swap out Ninja's http request code from the video with this: $http.get('data/ninjas.json').then(function(response){ $scope.ninjas = response.data; });

[@kintarooe575]

Thank you so much! This solved my problem!

[@locus1289]

Hwoah!

[@runthecode_]

$http.get("data/sites.json").then( function successCallback(response) { $scope.sites = response.data; }, function errorCallback(response) { console.error(response); } );

[@moeidsaleemkhan7233]

404 error

[@theredcrafteryt6130]

TypeError: $http.get(...).success is not a function.

[@theredcrafteryt6130]

Angular V6, Brackets text editor(Atom Broke :( )

[@theredcrafteryt6130]

NVM I got it $http.get was deprecated sense Angular 1.5 you now have to use $http.get().then();

[@victorfuentesmenes2462]

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

[@bimalgrg8951]

Please control while hitting Enter key... m watching tutorials with headphone :(

[@pietrononame4945]

It is not working now the way shown in the video, i.e. right syntax should be like: $http.get('/someUrl', config).then(successCallback, errorCallback);

[@bijoymogor]

// Simple GET request example: $http({ method: 'GET', url: 'data/ninjas.json' }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available $scope.ninjas = response.data; console.log($scope.ninjas); }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. });

[@mukunth7395]

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