I'm trying to extract the image post URLs from a subreddit feed, and render <img>
elements on my page.
Been trying to hack together the .getJSON()
Flickr example from the jQuery Docs for a while now and I'm not getting anywhere.
Code in question:
$.getJSON('http://www.reddit.com/r/pics.json', function (data) {
$.each(data.children, function (i, item) {
$('<img/>').attr("src", url).appendTo("#images");
});
});
In the body, I have the element: div#images
I understand that I need to use JSONP, but not sure how. Can somebody point me in the right direction?
You are using the wrong url. Use this:
$.getJSON("http://www.reddit.com/r/pics/.json?jsonp=?", function(data) {
// Do whatever you want with it..
});
EDIT : Working example based on your fiddle in the comments.
$.getJSON("http://www.reddit.com/r/pics/.json?jsonp=?", function(data) {
$.each(data.data.children, function(i,item){
$("<img/>").attr("src", item.data.url).appendTo("#images");
});
});
You should use data.data.children
and not data.children