CODEWITHSUNDEEP
ajaxjqueryjsonp
oshirowanen
oshirowanen

Reputation: 15965

Taking data out of JSONP

Using the url: http://www.remote_host.com/feed.php?callback=jsonpCallback

I get back:

jsonpCallback({
    "rss": {
        "channels": [
            {
                "title": "title goes here",
                "link": "http://www.remote_server.com/feed.php",
                "description": "description goes here",
                "items": [
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    }
                ]
            }
        ]
    } })

At clientside, I have the following script:

$(document).ready(function() {
    get_jsonp_feed();

    function get_jsonp_feed() {
        $.ajax({
            url: 'http://www.remote_host.co.uk/feed.php',
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonpCallback',
            error: function(xhr, status, error) {
                alert("error");
            },
            success: function(jsonp) { 
                alert("success");
            }
        });
    }
});

How do I write some of the jsonp content to the screen, i.e.

channel title: title goes here<br /><br />

item title: title goes here<br />
item link: link goes here<br />
item date: date goes here<br />
item description: description goes here<br /><br />

item title: title goes here<br />
item link: link goes here<br />
item date: date goes here<br />
item description: description goes here<br /><br />

item title: title goes here<br />
item link: link goes here<br />
item date: date goes here<br />
item description: description goes here<br /><br />

instead of alerting "success"?

Upvotes: 1

Views: 341

Answers (4)

Niklas
Niklas

Reputation: 30012

You could have the callback function something like this:

function jsonpCallback(data){
    $.each(data.rss.channels,function(d,c){
        var html = "channel title: "+c.title+"<br /><br />";

        $('#content').html($('#content').html()+html);
        $.each(c.items,function(i,e){

        var html = "item title: "+e.title+"<br />item link: "+e.link+"<br />item date: "+e.pubDate+"<br />item description: "+e.description+"<br /><br />";
        $('#content').html($('#content').html()+html);

    });

    });

}

Example: http://jsfiddle.net/niklasvh/tYgzw/

Upvotes: 0

xkeshav
xkeshav

Reputation: 54072

try this:

for (var i = 0; i < jsonpCallback.rss.channels.length; i++) {
    document.write("<hr/><b>" + i + "</b><br/>");
    document.write("Channel Title=>" + jsonpCallback.rss.channels[i].title );
}

var itemList = jsonpCallback.rss.channels[0].items;

for (var k = 0; k < itemList.length; k++) {
    document.write("<hr/>Item Number:<b>" + k + "</b><br/>");
    document.write("<br/>Item Title=>" + itemList[k].title );
    document.write("<br/>Item Link=>" +  itemList[k].link );
    document.write("<br/>Item Publication Title=>" + itemList[k].pubDate );
    document.write("<br/>Item Description=>" +  itemList[k].description );
}

Working DEMO

Upvotes: 0

aorcsik
aorcsik

Reputation: 15552

You can reach the values in jsonp like this:

html = "channel title: "+jsonp.rss.channels[0].title+"<br /><br />";
for (x in jsonp.rss.channels[0].items)
{
    html += "item title: "+jsonp.rss.channels[0].items[x].title+"<br />";
    html += "item link: "+jsonp.rss.channels[0].items[x].link+"<br />";
    html += "item date: "+jsonp.rss.channels[0].items[x].pubDate+"<br />";
    html += "item description: "+jsonp.rss.channels[0].items[x].description+"<br /><br />";
}

Then you can insert the html where erver you want in your site.

Upvotes: 2

Petah
Petah

Reputation: 46060

You could use the jQuery tmpl plugin, here is an example:

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

$.ajax({
  dataType: "jsonp",
  url: moviesServiceUrl,
  jsonp: "$callback",
  success: showMovies
});

// Within the callback, use .tmpl() to render the data.
function showMovies( data ) {
  // Render the template with the "movies" data and insert
  // the rendered HTML under the 'movieList' element
  $.tmpl( "movieTemplate", data )
    .appendTo( "#movieList" );
}

See: http://api.jquery.com/jquery.tmpl/

Upvotes: 0

Related Questions