{"id":3058,"date":"2014-03-15T03:27:11","date_gmt":"2014-03-15T03:27:11","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/15\/angularjs-resource-service-with-jsonp-fails-collection-of-common-programming-errors-2\/"},"modified":"2014-03-15T03:27:11","modified_gmt":"2014-03-15T03:27:11","slug":"angularjs-resource-service-with-jsonp-fails-collection-of-common-programming-errors-2","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/15\/angularjs-resource-service-with-jsonp-fails-collection-of-common-programming-errors-2\/","title":{"rendered":"AngularJS resource service with jsonp fails-Collection of common programming errors"},"content":{"rendered":"<p>I struggled a lot with this problem, so hopefully this will help someone in the future \ud83d\ude42<\/p>\n<p>JSONP expects a function callback, a common mistake is to call a URL that returns JSON and you get a <em>Uncaught SyntaxError: Unexpected token :<\/em> error. Instead, JSONP should return something like this (don&#8217;t get hung up on the function name in the example):<\/p>\n<pre><code>angular.callbacks._0({\"id\":4,\"name\":\"Joe\"})\n<\/code><\/pre>\n<p>The documentation tells you to pass JSON_CALLBACK on the URL for a reason. That will get replaced with the callback function name to handle the return. Each JSONP request is assigned a callback function, so if you do multiple requests they may be handled by angular.callbacks._1, angular.callbacks._2 and so forth.<\/p>\n<p>With that in mind, your request should be something like this:<\/p>\n<pre><code>var url = 'http:\/\/myserver.com:8888\/dosomething\/me@mydomain.com\/arg2';\n$http.jsonp(url + '?callback=JSON_CALLBACK')\n   .then(function (response) {\n       $scope.mydata = response.data;\n       ...\n<\/code><\/pre>\n<p>Then AngularJS will actually request (replacing JSON_CALLBACK):<\/p>\n<pre><code>http:\/\/myserver.com:8888\/dosomething\/me@mydomain.com\/arg2?callback=angular.callbacks._0\n<\/code><\/pre>\n<p>Some frameworks have support for JSONP, but if your api doesn&#8217;t do it automatically, you can get the callback name from the querystring to encapsulate the json. Example is in Node.js:<\/p>\n<pre><code>var request = require('request');\nvar express = require('express');\nvar app = express();\n\napp.get('\/', function(req, res){\n    \/\/ do something to get the json\n    var json = '{\"id\":4,\"name\":\"Joe\"}';\n\n    res.writeHead(200, {\"Content-Type\": \"application\/javascript\"});\n    res.write(req.query.callback + '(' + json + ')');\n    res.end();\n});\napp.listen(8888);\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I struggled a lot with this problem, so hopefully this will help someone in the future \ud83d\ude42 JSONP expects a function callback, a common mistake is to call a URL that returns JSON and you get a Uncaught SyntaxError: Unexpected token : error. Instead, JSONP should return something like this (don&#8217;t get hung up on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3058","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3058"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3058\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}