Display Inline Json Groupon API results

[seblondres]

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 October 26, 2014 by seb_london

[niche]

http://stackoverflow.com/questions/6246273/how-to-change-the-display-of-a-div-using-javascript

[seblondres]

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

[dsonesuk]

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;}

[dsonesuk]

Also this

$(function()

is the same as

$(document).ready(function()

 

Use one or the other, both are not required.

[seblondres]

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>

[dsonesuk]

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 November 6, 2014 by dsonesuk

[seblondres]

ok great it works, but I had to change the css to:

.desc a + * { margin-top:-18px;}

Thanks a lot for your help!