{"id":1794,"date":"2014-10-27T09:53:54","date_gmt":"2014-10-27T15:53:54","guid":{"rendered":"http:\/\/www.mooreds.com\/wordpress\/?p=1794"},"modified":"2014-10-10T10:05:15","modified_gmt":"2014-10-10T16:05:15","slug":"using-jsonp-for-angular-requests","status":"publish","type":"post","link":"https:\/\/www.mooreds.com\/wordpress\/archives\/1794","title":{"rendered":"Using JSONP For Angular Requests"},"content":{"rendered":"<figure style=\"width: 150px\" class=\"wp-caption alignleft\"><img decoding=\"async\" class=\"alignleft\" title=\"Transparent Screen by Neil T\" src=\"http:\/\/www.mooreds.com\/wordpress\/wp-content\/uploads\/2014\/10\/8645832_4e2e485ce7_q_screen.jpg\" alt=\"screen photo\" width=\"150\" \/><figcaption class=\"wp-caption-text\"><small>Photo by <a href=\"http:\/\/www.flickr.com\/photos\/41894148532@N01\/8645832\" target=\"_blank\">Neil T<\/a> <a title=\"Attribution-ShareAlike License\" href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" src=\"http:\/\/www.mooreds.com\/wordpress\/wp-content\/plugins\/wp-inject\/images\/cc.png\" alt=\"\" \/><\/a><\/small><\/figcaption><\/figure>\n<p>I was writing an angular app (<a href=\"http:\/\/github.com\/mooreds\/angular-bestbuy\">source<\/a>) that was accessing the <a href=\"http:\/\/developer.bestbuy.com\/\">Best Buy API<\/a>, just to play around and get more familiar with Angular.\u00a0 All of my previous apps had been to APIs that I controlled, and could thus use <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cross-origin_resource_sharing\">CORS<\/a> to set headers.\u00a0 Obviously, not so with the Best Buy API.<\/p>\n<p>Whoops.<\/p>\n<p>Luckily Angular makes accessing data via JSONP almost exactly the same as accessing data via XMLHttpRequest\/CORS.\u00a0 Rather than use <code>$http.get<\/code>, you use <code>$http.jsonp<\/code>. You have the same promise returned, and can handle the results in the same way. I didn&#8217;t dive into error handling (but if Angular <a href=\"http:\/\/api.jquery.com\/jQuery.ajax\/\">follows jQuery&#8217;s lead<\/a>, it looks like there&#8217;s none), and obviously JSONP can only be used to read information, but the guts of injecting a script, etc, are all handled for you.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was writing an angular app (source) that was accessing the Best Buy API, just to play around and get more familiar with Angular.\u00a0 All of my previous apps had [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-1794","post","type-post","status-publish","format-standard","hentry","category-angularjs"],"_links":{"self":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/1794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1794"}],"version-history":[{"count":1,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/1794\/revisions"}],"predecessor-version":[{"id":1796,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/1794\/revisions\/1796"}],"wp:attachment":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}