Jump to content
seblondres

Display Inline Json Groupon API results

Recommended Posts

Hi,

 

I'm trying to display the following results inline.

 

For the moment the outcome is as follow:

 

Title

 

Description

 

and I'd like to remove the space between the two so it looks like the below with also the title underline:

 

Title

Description

 

Here is the code:

$(function() {$(document).ready(function(){$.getJSON("https://partner-int-api.groupon.com/deals.json?country_code=UK&tsToken=IE_AFF_0_201236_212556_0&filters=category:food-and-drink&offset=0&limit=50&callback=?",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");});});return false;});});

Thanks for your help,

Seb

Edited by seb_london

Share this post


Link to post
Share on other sites

Thanks for your feedback and the link. I have added:

document.getElementById('showdata').style.display = 'block';

to

$(function() {$(document).ready(function(){$.getJSON("https://partner-int-api.groupon.com/deals.json?country_code=UK&tsToken=IE_AFF_0_201236_212556_0&filters=category:food-and-drink&offset=0&limit=50&callback=?",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");document.getElementById('showdata').style.display = 'block';});});return false;});});

but I still have a space between the tittle and the description :facepalm:

Share this post


Link to post
Share on other sites

Its probably do to the margins set to paragraph element, give the div a classname

var div_data ="<div class="whatever"><a href='"+data.dealUrl+"'>"+data.title+"</a><p>"+data.highlightsHtml+"</p></div>";

 

then use css to adjust paragraph margin within that element

 

.whatever p{ margin-top: 0;}

Share this post


Link to post
Share on other sites

Thanks but when I add the class then the groupon feed don't appear any more:

 

My Css:

.desc p { margin-top: 0;}

JS code:

 

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

Share this post


Link to post
Share on other sites

Sorry!, i'm so used to using single quotes to enclose text string like

 

var div_data ='<div class="desc"><a href="'+data.dealUrl+'">'+data.title+'</a><p>'+data.highlightsHtml+'</p></div>'; which means i can enter class="desc" as you normally would, without affecting the code.

 

with yours it should be

 

var div_data =

"<div class='desc'><a href='"+data.dealUrl+"'>"+data.title+"</a><p>"+data.highlightsHtml+"</p></div>";

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...