Sign in
Log inSign up

How to change the background of a div from a API json?

Terepaima Perez's photo
Terepaima Perez
·Dec 10, 2016

Hi, everyone! I'm trying the quote generator project from FCC, and I'm trying to make something little bit different.

I using the API from thesaidso.com, and in the JSON I can obtain an url from an image.

I was wondering, how can I take that url and transform it into the background of some div.

here's my code so far 

$(document).ready(function() {    

    $("#getMessage").on("click", function(){

        $.ajax({
            type:'GET',
            url: 'quotes.rest/qod.json?category=management ',
            success: function(info){



                $('.message').html(info.contents.quotes[0].quote);
                $('.author').html(info.contents.quotes[0].author+" "+info.contents.quotes[0].date);
                $(".box").css('background-image','url(theysaidso.com/img/bgs/hang_on_building_to…);

            }
        });    

    });

As you can see I paste directly the url from the JSON, but I want it to take the url by itself.

I try to make the JSON address a variable inside the $.ajax like this=

 var backgrnd= info.contents.quotes[0].background;

And use this variable to get the url, but it didn't work, can you tell me a way to do it? PD= here's the API

http://quotes.rest/qod.json?category=life

3