jQuery get data based on value

Question

I am trying to get some JSON data shown below from dribble api by using jQuery, it works at first, however I am trying to append second page of the JSON to my index... how do I get the second page from this kind of JSON data?

 {
  "page": "1",
  "per_page": 15,
  "pages": 50,
  "total": 750,
  "shots": [{
    "id": 1155601,
    "title": "Vector Rocket Icon",
    "height": 600,
    "width": 800,
    "likes_count": 0,
    "comments_count": 1,
    "rebounds_count": 0,
    "url": "http://dribbble.com/shots/1155601-Vector-Rocket-Icon",
    "short_url": "http://drbl.in/iltf",
    "views_count": 4,
    "rebound_source_id": 1152826,
    "image_url": "http://dribbble.s3.amazonaws.com/users/45269/screenshots/1155601/vector-rocket-icon-color.jpg",
    "image_teaser_url": "http://dribbble.s3.amazonaws.com/users/45269/screenshots/1155601/vector-rocket-icon-color_teaser.jpg",
    "image_400_url": "http://dribbble.s3.amazonaws.com/users/45269/screenshots/1155601/vector-rocket-icon-color_1x.jpg",
    "player": {
      "id": 45269,
      "name": "spovv",
      "location": "Bulgaria",
      "followers_count": 2721,
      "draftees_count": 2,
      "likes_count": 1293,
      "likes_received_count": 13218,
      "comments_count": 273,
      "comments_received_count": 996,
      "rebounds_count": 40,
      "rebounds_received_count": 35,
      "url": "http://dribbble.com/spovv",
      "avatar_url": "http://dribbble.s3.amazonaws.com/users/45269/avatars/original/avatar.png?1329240931",
      "username": "spovv",
      "twitter_screen_name": "spovv",
      "website_url": "http://www.behance.net/s-pov",
      "drafted_by_player_id": 47973,
      "shots_count": 114,
      "following_count": 385,
      "created_at": "2011/07/12 07:44:15 -0400"
    },
    "created_at": "2013/07/15 03:41:04 -0400"
  }, {
    "id": 1155600,
    "title": "Ella Shadow ",
    "height": 600,
    "width": 800,
    "likes_count": 1,
    "comments_count": 0,
    "rebounds_count": 0,
    "url": "http://dribbble.com/shots/1155600-Ella-Shadow",
    "short_url": "http://drbl.in/ilte",
    "views_count": 2,
    "rebound_source_id": 1106103,
    "image_url": "http://dribbble.s3.amazonaws.com/users/357571/screenshots/1155600/elluva_shadow.yellow.png",
    "image_teaser_url": "http://dribbble.s3.amazonaws.com/users/357571/screenshots/1155600/elluva_shadow.yellow_teaser.png",
    "image_400_url": "http://dribbble.s3.amazonaws.com/users/357571/screenshots/1155600/elluva_shadow.yellow_1x.png",
    "player": {
      "id": 357571,
      "name": "elluva design studio",
      "location": "San Francisco, CA",
      "followers_count": 13,
      "draftees_count": 0,
      "likes_count": 21,
      "likes_received_count": 63,
      "comments_count": 5,
      "comments_received_count": 10,
      "rebounds_count": 2,
      "rebounds_received_count": 0,
      "url": "http://dribbble.com/elluva",
      "avatar_url": "http://dribbble.s3.amazonaws.com/users/357571/avatars/normal/Ella-480.png?1373396866",
      "username": "elluva",
      "twitter_screen_name": "elluva",
      "website_url": "http://www.elluva.co",
      "drafted_by_player_id": 3413,
      "shots_count": 4,
      "following_count": 9,
      "created_at": "2013/06/26 02:39:33 -0400"
    },
    "created_at": "2013/07/15 03:41:03 -0400"
  }

jquery:

             function doAjax(){
                $.ajax({
                    type:'GET',
                    url: $url,
                    dataType: 'json',
                    success: function(data){
                        $.each(data.shots, function(key, value){
                            // first page only.
                            alert(data.page)
                           $('#data ul').append('<li><img src="'+ value.image_url+'" /></li>');                            
                        })

                        //alert(value.title);
                        // scroll to second page.
                        var scrolling = function() {

                            this.totalHeight = $(document).height();    
                            this.scrolltop = $(window).scrollTop();

                            $(window).scroll(function(){
                                totalHeight = $(document).height();
                                scrolltop = $(window).scrollTop();
                                if((totalHeight - scrolltop) < 600){
                                    // append different pages and do ajax.
                                    doAjax();
                                }
                            })
                        }
                        $scroll = new scrolling();
                        //$('#data').append(data);
                    }
                })
            }
            doAjax();

[stackoverflow.com/questions/7771616/… [1]: stackoverflow.com/questions/7771616/… — Martijn
– Martijn, Commented Jul 15, 2013 at 8:03
You should probably request the second page. What is $url? — Stefan
– Stefan, Commented Jul 15, 2013 at 8:03

Raghav Rach · Accepted Answer · 2013-07-15 09:55:20Z

0

Use javascript session variables. store the page1 json in session. then use it in second page and concat page1 and page2 json.

concat is done as follows.

var merger_json = page1_json.concat(page2_json);

edited Jul 15, 2013 at 9:55

answered Jul 15, 2013 at 8:08

Raghav Rach

4,9452 gold badges18 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery get data based on value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related