1

I created an .getjson() call to work with reddit.com's API. The code is below.

$(document).ready(function() {

        var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
        var searchQueryText = 'XBox';  //getSearchQueryText();

        $.getJSON(SEARCH_URL, {
            q: searchQueryText,
            limit: 3
            })
                .done(function (data) {
                    $.each(data.data.children, function(i,item) {
                        $("<h1>").attr("src", item.data.url).appendTo("#images");
                    });

                })
               .fail(function (data) {
                      alert("Something went wrong");
                    });

});//end ready

My .getJSON() function works and gets back data. However I am having trouble with my .each() function. I know it's slightly off even though my console isn't giving me an error message. I was hoping someone much smarter than me could help me rewrite it so it passes the content through #images in my body?

The JSON looks like this http://www.reddit.com/r/subreddits/search.json?q=xbox&limit=3

London804
  • 1,072
  • 1
  • 22
  • 47
  • What is it doing wrong? – Barmar Jul 15 '13 at 03:34
  • WHat does the JSON look like? – Barmar Jul 15 '13 at 03:35
  • I'm sorry basically the .each function is suppose to get the data ( in this case basically a list from reddit) and put all of them of the page in the #images. – London804 Jul 15 '13 at 03:36
  • That's pretty obvious. What is it doing instead? What is "slightly off" about it? – Barmar Jul 15 '13 at 03:37
  • My apologizes. It is not appending the data to the ID. My console gives me no errors so my assumption is I have a simple mistake somewhere that I am not seeing. – London804 Jul 15 '13 at 03:41
  • Sorry, I thought "slightly off" meant something more subtle than "it doesn't do work at all". Anyway, you need to post the JSON, so we can tell if you're accessing it properly. – Barmar Jul 15 '13 at 03:44
  • The JSON looks like this http://www.reddit.com/r/subreddits/search.json?q=xbox&limit=3 – London804 Jul 15 '13 at 03:44
  • 2
    `h1` elements don't have `src` attributes. What are you expecting that to do? – Barmar Jul 15 '13 at 03:49
  • Your right initially it was an '' that I had but than I realized it's not an image. I shouldn't have said this is slightly off. Apparently it sucks and I need to rewrite it. The hard part is my console throws no errors so I'm on jquery.com trying my best to rewrite it on my own. – London804 Jul 15 '13 at 03:52
  • If you want to embed other web pages in your page, use ` – Barmar Jul 15 '13 at 03:54
  • I don't want to use an iframe I want to use ajax. The answer I need is how do I write an .each() to go through the data retrieved from the website and display on it on my website. I am new to APIs and jQuery for that matter so I am struggling. – London804 Jul 15 '13 at 04:00
  • Try logging what you/ your code are doing, and making your 'success' handler its own function. How do you expect to be able to understand or debug it, if you can't see what it's doing? Use `console.log()` to print out key values/expressions & you'll be able to see what's going wrong. – Thomas W Jul 15 '13 at 04:05
  • What do you want to do with the URLs? Just display them as plain text? – Barmar Jul 15 '13 at 04:09

1 Answers1

0

If you just want to show all URLs in the #images elements, there is some problem in your code.

I test the reddit JSON data you're fetching.

The URL is a web page link not a image resource.

So why you try to add a non-exist attribute "src" to h1 element?

Try to use text() if you just want to show the URL and append them to element:

var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
var searchQueryText = 'XBox';  //getSearchQueryText();

$.getJSON(SEARCH_URL, {
    q: searchQueryText,
    limit: 3
})
.done(function (data) {
    $.each(data.data.children, function(i,item) {
    $("<h1>").text(item.data.url).appendTo("#images");
 });

})
.fail(function (data) {
    alert("Something went wrong");
});

This is jsfiddle demo

Hope this is helpful for you.

Chickenrice
  • 5,727
  • 2
  • 22
  • 21
  • Dude first of thank you for taking the time and creating a jsfiddle. Half the time I can't get those things to work. I actually wanted to show the 'title' rather than the URL but I substituted .url for .title. Thanks a million! – London804 Jul 15 '13 at 04:34