Pinterest images returning broken after ajax call

Question

So I'm trying to make a mini app where I can access a bunch of drawing references I pinned on my pinterest board. I managed to get ajax call to work and SOME of the images are appending but then some do not.

I originally used the url property but then everything broke so I switched to link where I managed to get some images but some were still broken. Afterward I added an if statement to weed out images that didn't have a link url.

This worked as I can see the urls popping up in the console, they just don't render images.

Does anyone have any ideas?

//on document start up

$(document).ready(function(){

//declare the global variables:

var queryURL, results, resultURL, imageHolder, image;

//create the url where we will get the images from pintrest

 queryURL = "https://api.pinterest.com/v1/boards/gasulliv/concept-art-inspiration/pins/?access_token=AXHj1v5z8_oy5kcy6NtLlZaoY_XAFQ-h5sli9PNErKPqdSA7cQAAAAA&fields=id%2Clink%2Cnote%2Curl";

 //empty the div
 $("#images").empty();

//performing ajax call

$.ajax({
    url: queryURL,
    method: "GET"
    }).done(function(response) {
        console.log(response.data);

    //creating a variable for the repsonse data

        results = response.data;

        //loop through the data
        //this is the shorthand for a forloop
        for (var i in results){

            resultURL = results[i].link;
            console.log(results[i].url);

            if (results[i].link !== ""){

                //put results in a variable and then with each loop append them to the div

                    imageHolder = $("<div class='imageHolder'>");

                    image = $("<img>").attr("src", resultURL);

                    imageHolder.append(image);

                    $('#images').prepend(imageHolder);

            }

        }

    });

});

Answer 1

Figured it out.

Just a head's up if you do ever run into this problem with pinterest's api, you'll need to make sure your queryURL includes the original be sure to return it like this:

resultURL = results[i].image.original.url;

this should return the original image's url

Answer 2

Don't make your access token accessible to everyone ! then for readability, you can make a code like this :

var tpl = [
        "<div class='results'>",
        "<div class='card'>",
            "<div class='card-result'>",
            "<p class='pBlack20'>" + data.response.docs[i].lead_paragraph + "</p>",
            "<p class='pBlack14'>" + data.response.docs[i].pub_date + "</p>",
            "<a class='FontRed link' target='_blank' href='" + data.response.docs[i].web_url + "'>For more detail</a>",
            "<hr>",
            "</div>",
        "</div>",
        "</div>"
    ]
    $('.results-content').append(tpl.join(''));