not able to fetch JSONP data from my own api in angularjs

Question

I am trying to fetch data from my own api but was not able to succeed in fetching the same to vegdata variable... here is the controller code

    $scope.filterText = null;
$scope.vegdata =[];
$scope.init = function() {
url = "http://192.168.1.17\:5000/?callback=JSON_CALLBACK";
$http.jsonp(url).success(function(data){
        console.log(data);
        $scope.vegdata = data;  


    }).error(function(errord){
      alert(errord);
    });

JSOn format looks like below... the same I was able to fetch through browser

[{"name": "Tuar", "image": "0.0", "fat": "0.0", "alias": [{"vegname": "Tuar ", "language": "Hindi"}, {"vegname": "Red Gram", "language": "English"}, {"vegname": "Cajanus cajan", "language": "Botanical Name"}], "protein": "0.0", "energy": "0.0", "carbohydrates": "0.0"}]

Is there any console error? Please provide more information. — frapontillo
– frapontillo, Commented Feb 23, 2014 at 12:04
Is it a typo in the url http://192.168.1.17\:5000? It should be http://192.168.1.17:5000. — Khanh TO
– Khanh TO, Commented Feb 23, 2014 at 12:06
Thanks for your replies... I tried "192.168.1.17:5000?callback=JSON_CALLBACK"; also no luck ; There were no error in console... no data being shown in page — Kishore Reddy
– Kishore Reddy, Commented Feb 23, 2014 at 12:07
Did you use a network sniffer to see what is being sent and returned? — JeffryHouser
– JeffryHouser, Commented Feb 23, 2014 at 12:19

Khanh TO · Accepted Answer · 2014-02-23 12:14:00Z

2

Your response should be like this:

yourCallBack([{"name": "Tuar", "image": "0.0", "fat": "0.0", "alias": [{"vegname": "Tuar ", "language": "Hindi"}, {"vegname": "Red Gram", "language": "English"}, {"vegname": "Cajanus cajan", "language": "Botanical Name"}], "protein": "0.0", "energy": "0.0", "carbohydrates": "0.0"}]);

With yourCallBack being retrieved from callback query string. I don't know how to do it with python, in asp.net mvc I would to something like this:

string callback = Request.QueryString["callback"];

answered Feb 23, 2014 at 12:14

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

4 Comments

JeffryHouser Over a year ago

This is incorrect. Using AngularJS's JSONP function; the JSONP callback function ( JSON_CALLBACK ) is handled by the Angular framework and you do not need to create an explicit function to handle it.

Khanh TO Over a year ago

@Reboog711: I mean the data returned from server side must be wrapped.

Khanh TO Over a year ago

@Reboog711: callback=JSON_CALLBACK will be turned into something like callback=angular.callbacks._0. by angular. On server side, we have to take this callback from the query string and wrap the response

JeffryHouser Over a year ago

Oh, you're right. My mistake; I removed the downvote.

Collectives™ on Stack Overflow

not able to fetch JSONP data from my own api in angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related