Pagination with API

[seblondres]

Hi,

 

I have this URL from the Groupon API:

https://partner-int-api.groupon.com/deals.json?country_code=IE&tsToken=IE_AFF_0_201236_212556_0&division_id=dublin&offset=0&limit=20

The &offset=0 is use for pagination. So I was wondering how could I add a "Next" link or "Button" to add +10 to &offset= so users can call the next 10 deals? I've been working with JSON to retrieve the deals and I was thinking of an onclick event, if someone could point me to the right direction.

 

Many Thanks,

Seb

Edited November 5, 2014 by seb_london

[justsomeguy]

Which part are you having a problem with? Actually changing the value in the URL?

[seblondres]

That's right, I'd like to be able to add +10 to "&offset=" so on click on a button it will looks like "&offset=10", on another click it will looks like "&offset=20" etc.

Edited November 5, 2014 by seb_london

[justsomeguy]

You'll need to figure out what the current offset is, then. Worst case, you can get the URL and parse it to split up all of the parameters, then go through the parameter list to find the offset parameter, get the value, and increase it. Another way would be to store the URL without the offset parameter and add it each time you use the URL. The offset could be tracked separately in that case and you just add the current offset to the URL whenever you need to use the URL.

[seblondres]

ok thanks for your answer. In PHP, I'm able to add a variable in the URL (see: &offset='.$start.') and then rebuild the url with http_build_query and $start+10. It works fine, but since Groupon only support JSON, I was looking for a similar solution in JavaScript by passing a variable in the URL.

https://partner-int-api.groupon.com/deals.json?country_code=IE&tsToken=IE_AFF_0_201236_212556_0&division_id=dublin&offset='.$start.'&limit=20

Edited November 5, 2014 by seb_london

[justsomeguy]

Javascript uses + for string concatenation.

[seblondres]

ok, I have slice up the URL so now I have a variable for offset. How can I increase offset +10 from a button or link?

 

code:

 

<script>$(document).ready(function() {var URL = "https://partner-int-api.groupon.com/deals.json";var countryCode = "UK";var token = "&tsToken=IE_AFF_0_202176_212556_0";var categoryFilter = "category:food-and-drink";var offset = "0";var limit = "10";var jsonCallBack = "&callback=?";var ajaxURL = URL + "?country_code=" + countryCode + token + "&filters=" + categoryFilter + "&offset=" + offset + "&limit=" + limit + jsonCallBack;$.getJSON(ajaxURL,function(data) {$.each(data.deals, function(i,data) {var div_data ="<div><a href='"+data.dealUrl+"'>"+data.title+"</a><p>"+data.highlightsHtml+"</p></div>";$(div_data).appendTo("#showdata");}); // end each}); // end get JSON}); // end ready</script>

Thanks,

[justsomeguy]

One option would be to have the offset value saved in the global namespace, maybe as a property of a global object, and each time they click on the next button you would check the current offset, add 10 to it, and use that value in the next link to load. This is all running in one page without a refresh, right?