JSON-P + RESTful API

Question

noob here. I can't not get my alert to show up with this code. Can someone please point me in the right direction to make this pull from the json feed? Thanks in advance.

<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">    </script>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
jQuery.getJSON("http://api.shoplocal.com/api/2012.1/json/getpromotions.aspx?campaignid=86107c2cdcc39561&citystatezip=46225" + "&campaignid=",         function(feed) {
    alert("Symbol: " + feed.content.collection.data.image);
});
</script></body>
</html>

Here's the JSON:

{
    "content": {
        "collection": {
            "data": {
                "code": "RC-130127",
                "customimagedescription": "",
                "customimagelocation": "",
                "displayorder": "0",
                "featuredpromotion": "N",
                "identifier": "01\/27 Circular",
                "image": "http:\/\/akimages.shoplocal.com\/dyn_rppi\/140.0.90.0\/RobertsCamera\/large\/130127_Pg1_cqu82.jpg",
                "postenddate": "2\/2\/2013 12:00:00 AM",
                "poststartdate": "1\/27\/2013 12:00:00 AM",
                "previewenddate": "",
                "previewstartdate": "",
                "promotionchildtypeid": "",
                "promotionchildtypename": "",
                "promotionid": "85347",
                "promotionmessage": "",
                "retailerid": "12847",
                "retailername": "Roberts Camera",
                "saleenddate": "2\/2\/2013 12:00:00 AM",
                "salestartdate": "1\/27\/2013 12:00:00 AM",
                "tag": "RC-130127",
                "title": "01\/27 Circular",
                "typeid": "1",
                "vo": "promotion"
            },
            "vo": "promotion"
        },
        "date": "1\/30\/2013 12:28:52 PM"
    }
}

I highly doubt all of the data returned contains no arrays and is only objects. When you console.log() the returned value, how many of them say Array[1]? — Ohgodwhy, Jan 30 '13 at 18:24

score 1 · Answer 1 · answered Jan 30 '13 at 18:28

Add &callback=? to the end of your URL to trigger JSONP, otherwise you'll get a XMLHttpRequest crossdomain error:

$.getJSON("http://api.shoplocal.com/api/2012.1/json/getpromotions.aspx?campaignid=86107c2cdcc39561&citystatezip=46225&campaignid=&callback=?",
               function(feed) {
    alert("Symbol: " + feed.content.collection.data.image);
});

See the JSONP section of the getJSON docs for more info.

I've also just noticed you're pulling in jQuery v1.3.2. This solution may not work for a version that old, but it does work with newer versions.

This works! Yeah, I need to update my code snippets. (v1.3.2 has been in my lib for a long time. ) Thanks for your help Samsquanch! :) — persphone80, Jan 30 '13 at 18:38

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

Due to security reasons you are not able to call a resource using the Ajax functionalities like (getJSON, ajax, post, get) outside the domain of your application.

Take a look on your javascript console to see the issue.

How to call external url in jquery?

This link will clarify everything.

http://en.wikipedia.org/wiki/Same_origin_policy

edited May 23 '17 at 12:18

Community

1
1

answered Jan 30 '13 at 18:26

gustavodidomenico

4,640
1
34
50

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

See my answer to a related question for details as to why you should not be considering JSONP for use with supposedly "RESTful" APIs. In short, use CORS instead.

edited May 23 '17 at 12:27

Community

1
1

answered Jan 31 '13 at 10:30

Nicholas Shanks

10,623
4
56
80

JSON-P + RESTful API

3 Answers3