Parsing response from $http.jsonp

Question

I am facing trouble in parsing the response I got from calling a URL as :

        $scope.getSuggestions = function (val) {
        return $http.jsonp('https://Suggestions-api.net/v1/suggest?query=' + val + '&callback=JSON_CALLBACK').success(function (data) {
            return data.value;
        });
    };

    $scope.JSON_CALLBACK = function (data) {
        return data.value;
    };

EDIT: UI:

<input type="text" id="search" ng-model="searchText" typeahead="JumboID for JumboID in getSuggestions($viewValue)" />

The response I am getting in the format as :

{"@odata.context":"https://Suggestions-api.net/indexes('jumboindex')/$metadata#docs(JumboID)",
"value":
[{"@search.text":"90911491","JumboID":"4454b90146a98733529b38942d028acb:f011f34214422e4903f4590819f41c21"},
{"@search.text":"9094993","JumboID":"07c927eae265db736a20650e77d2e945:f011f34214422e4903f4590819f41c21"},
{"@search.text":"90910444","JumboID":"0155444a12dfadff2451e06be40a98d2:f011f34214422e4903f4590819f41c21"},
{"@search.text":"9090 Whiskey Bottom Road Laurel Maryland 20723","JumboID":"34b239bd2dba98df6f5ae26a1f66c2fb:80880b9b1d7261f24c4e1c341853ec4e"},   
{"@search.text":"9090 Alta Drive Las Vegas Nevada 89145","JumboID":"d0746b298cfca4c5df3699823e32f6c3:80880b9b1d7261f24c4e1c341853ec4e"}]}

It throws error in console as :

Uncaught SyntaxError: Unexpected token :

Please help me out here.

score 0 · Answer 1 · answered Dec 30 '14 at 10:56

0

Put quotation marks around the url link

answered Dec 30 '14 at 10:56

yangli-io

16,760
8
37
47

@StuatLC You know it can be the answer. Because if you try to execute `$http.json` as it is provided in the question (without quotes) exactly the same error is thrown. – Dmitry Evseev Dec 30 '14 at 11:27
@DmitryEvseev, Edited the question it was a Typo – tom Dec 30 '14 at 11:33
@DmitryEvseev I am getting response as stated in the question but unable to parse it in required manner I guess! Would you mind to point out some parsing methods? – tom Dec 30 '14 at 11:40
Are you able to provide the real API link @tom because the link you have provided doesn't seem to work – yangli-io Dec 30 '14 at 11:42
@YangLi , Actually my API will work only into my domain, thats why I have given response of API in my question. – tom Dec 30 '14 at 12:42

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

Please note that angularjs documentation for jsonp says that:

The name of the callback should be the string JSON_CALLBACK.

In order for it to work you need to pass callback name to the server and wrap json in this function call on the back-end (see this SO for details, you'll get the idea).

Basically your url should be:

https://Suggestions-api.net/v1/suggest?query=ABCD&callback=JSON_CALLBACK

And then server response should look like:

JSON_CALLBACK(
    {"@odata.context":"https://Suggestions-api.net/indexes('jumboindex')/$metadata#docs(JumboID)",
    "value": [
    {"@search.text":"90911491","JumboID":"4454b90146a98733529b38942d028acb:f011f34214422e4903f4590819f41c21"},
    {"@search.text":"9094993","JumboID":"07c927eae265db736a20650e77d2e945:f011f34214422e4903f4590819f41c21"},
    {"@search.text":"90910444","JumboID":"0155444a12dfadff2451e06be40a98d2:f011f34214422e4903f4590819f41c21"},
    {"@search.text":"9090 Whiskey Bottom Road Laurel Maryland 20723","JumboID":"34b239bd2dba98df6f5ae26a1f66c2fb:80880b9b1d7261f24c4e1c341853ec4e"},   
    {"@search.text":"9090 Alta Drive Las Vegas Nevada 89145","JumboID":"d0746b298cfca4c5df3699823e32f6c3:80880b9b1d7261f24c4e1c341853ec4e"}
    ]}
)

edited May 23 '17 at 10:26

Community

1
1

answered Dec 30 '14 at 11:47

Dmitry Evseev

11,533
3
34
48

Thanks for sharing the link of another question, it was really helpful in understanding the concept of JSONP, but after adding the call back method as JSON_CALLBACK, it doesn't work for me. Please see the updated question! – tom Dec 30 '14 at 12:47
You're a bit off the right way. You need to wrap server response into `JSON_CALLBACK` call. Server reply will be a string `JSON_CALLBACK({ ... all json you have now should be an argument of that function ... })` and you don't need `$scope.JSON_CALLBACK`. Angular does that automatically and uses callback you pass to `$http.jsonp`. – Dmitry Evseev Dec 30 '14 at 15:44
@DimitryEvseev : I can see that my response is not wrapped in "JSON_CALLBACK(...)" string, it is same as I mentioned in my question. Any ideas why this is happening to me ? – tom Dec 31 '14 at 05:30
That's the question to the back-end. If it's third party, see documentation about how to provide callback name. If it's yours - fix it. – Dmitry Evseev Dec 31 '14 at 09:08
@DimitryEvseev : After fixing it I got "TypeError: Cannot read property 'length' of undefined", means I am getting the data but something weird happened in Angular so that it can't be parsed in TypeAhead Directive – tom Dec 31 '14 at 09:19
:-) Ending with a weird issue ! – tom Dec 31 '14 at 13:10

Parsing response from $http.jsonp

2 Answers2