Using jQuery with reddit API, trying to create seperate divs for each post

Question

the problem is, it posts all the titles, then the urls, then the permalinks separately. I need the title link and etc for each post together.

here is my code:

   $(document).ready(function() {
   $.getJSON(
    "http://www.reddit.com/r/pics.json?jsonp=?",
    function foo(data) {
      $.each(
        data.data.children.slice(0, 10),
        function(i, post) {
          $("#reddit-title").append('<br>' + '<div class="post-title">' + post.data.title + '</div>');
          $("#reddit-url").append('<br>' + '<div class="post-url">' + post.data.url + '</div>');
          $("#reddit-permalink").append('<br>' + '<div class="post-permalink">' + post.data.permalink + '</div>');
          $("#reddit-ups").append('<br>' + '<div class="post-ups">' + post.data.ups + '</div>');
          $("#reddit-downs").append('<br>' + '<div class="post-downs">' + post.data.downs + '</div>');
          $("#reddit-hr").append('<hr>');
        }
      )
    }
  )
  .success(function() { alert("second success"); })
  .error(function() { alert("error"); })
  .complete(function() { alert("complete"); });

});

here is what is outputs: /r/pics has reached 9 million subscribers, becoming the third subreddit to do so and the first image based sub beginning with P to reach that milestone

TRON Mustang

His claw is actually stuck in the screen, but he's trying to play it cool

When Life Truly Comes Into View

I think I found Stargate

A very happy baby orca breaches the surface

Aurora over Finland

A couple years, thousands of sticky notes, thousands of playing cards, thousands of flash cards, and many many pieces of paper later.

The trunk of a rainbow eucalyptus (not photoshopped)

This guy's mushroom hunt was a success

http://www.reddit.com/r/pics/comments/3edbsk/rpics_has_reached_9_million_subscribers_becoming/

//i.imgur.com/j2XIS80.jp

://i.imgur.com/oDORUZk.jp

//i.imgur.com/Zm7KJvd.jp

/i.imgur.com/0TnK4YJ.jp (had to make these not valid links for posting purposes)

://i.imgur.com/NhRGsb8.jp

://i.imgur.com/JYWOtEd.jp

h//imgur.com/a/nAMQ

://i.imgur.com/JhFz2AL.jp

//imgur.com/C0kpFx

/r/pics/comments/3edbsk/rpics_has_reached_9_million_subscribers_becoming/

/r/pics/comments/3eco7r/tron_mustang/

/r/pics/comments/3ebyag/his_claw_is_actually_stuck_in_the_screen_but_hes/

/r/pics/comments/3ebfdh/when_life_truly_comes_into_view/

/r/pics/comments/3ebq5b/i_think_i_found_stargate/

/r/pics/comments/3eb4gi/a_very_happy_baby_orca_breaches_the_surface/

/r/pics/comments/3eb121/aurora_over_finland/

/r/pics/comments/3ebzcu/a_couple_years_thousands_of_sticky_notes/

/r/pics/comments/3ec758/the_trunk_of_a_rainbow_eucalyptus_not_photoshopped/

/r/pics/comments/3ec03u/this_guys_mushroom_hunt_was_a_success/

8

4501

5471

5301

3847

5449

4904

1409

1125

1185

0

0

0

0

0

0

0

0

0

0

Answer 1

I think you'll need to add a new element which contains a title, URL, permalink, etc. for each item. Right now it sounds like you have just one element for each field but you really need one per item field.

Also, the ids should be changed to classes since there will be multiple elements with the same I'd otherwise. Then your selectors would be like this '.reddit-title' instead of '#reddit-title'

Answer 2

You could create a container div and then append the items to it, much like you have, and then append to a parent element like:

function(i, post) {
          $container = $("<div class='reddit-post'>")
          $container.append('<br>' + '<div class="post-title">' + post.data.title + '</div>');
          $container.append('<br>' + '<div class="post-url">' + post.data.url + '</div>');
          $container.append('<br>' + '<div class="post-permalink">' + post.data.permalink + '</div>');
          $container.append('<br>' + '<div class="post-ups">' + post.data.ups + '</div>');
          $container.append('<br>' + '<div class="post-downs">' + post.data.downs + '</div>');
          $container.append('<hr>');
          $('body').append($container)
        }

Answer 3

You're calling the element to append to with the id tag. So what happens is that each time you cycle through, you re-call the same id tag rather than a new grouping. For example:

If your page looks along the lines of this:

<div id="reddit-title">
</div>
<div id="reddit-content">
</div>

For each cycle, your code will pick out the title div for each title, and content div for each snippet and then append:

<div id="reddit-title">
  <div>Title 1</div>
  <div>Title 2</div>
</div>
<div id="reddit-content">
  <div>Content 1</div>
  <div>Content 2</div>
</div>

As suggested by some of the other answers, create a new div group at the beginning and append each item to that new div, rather than individually calling elements to append your new data.