0

so I'm trying to make a website that allows users to put in latitude and longitude coordinates to find hiking trails within the area. To do this, I'm using an api to retrieve the hiking trails. The problem is that some of the trails lack images. So I used the code below to fill in the otherwise empty spaces where the image would be 

$('img').on("error", function () {
     $(this).attr('src', `https://source.unsplash.com/collection/${244339}`);
});

This works but it returns the same randomly generated image repeatedly in place of every missing image. So my question is how can I randomize each image so that each object within the api that lacks an image receives a unique image. To further assist, I'll provide my html and javascript code. Thank you!

<body>

<input id="lat" placeholder="Enter the latitude of your desired hiking location">
<input id="long" placeholder="Enter the longitude of your desired hiking location">

<button value="send" id="submit" onclick="callApi()">Search</button>

</div>


function callApi() {
let latitude = document.getElementById("lat").value;
let longitude = document.getElementById("long").value;
console.log("latitude: " + latitude);
console.log("longitude: " + longitude);
const url = "https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=**************";
console.log(url);

$.getJSON(url, function (data) {
    console.log(data);
    console.log(data.trails[0].location);

    $.each(data, function (index, trails) {
        console.log(trails[2])
        let i;
        for (i = 0; i < trails.length; ++i) {
            let image = data.trails[i].imgMedium;
            let name = data.trails[i].name  
            let stars = data.trails[i].stars
            let starvotes = data.trails[i].starVotes

            $('.card-columns').append('<div class="card bg-dark text-white"><img class="card-img" src="' + image + '"/><div class="card-img-overlay"> <p class="name">' + name + '</p><p class="stars">' + stars + " stars" + '</p><p class="starvotes">' + starvotes + " votes" + '</p></div></div>');
         };
        $('img').on("error", function () {
            $(this).attr('src', `https://source.unsplash.com/collection/${244339}`);
        });
        })
    });
}
Dane92
  • 3
  • 2
  • 5
    What about just using a random image, i.e. https://source.unsplash.com/random. In that case, you wouldn't be afraid of randomly generating an ID for a collection that does not exist, e.g. https://source.unsplash.com/collection/3544/ – Terry Mar 02 '20 at 22:07
  • source.unsplash.com/collection/${244339} does produce a random image from an existing collection. The problem is that the random photo that is drawn is used repeatedly. So if you refresh the page, it will be a different generated picture, but it'll be used multiple times within that page – Dane92 Mar 03 '20 at 16:09
  • @Dane92 what @Terry is saying is that if you use `$(this).attr('src', 'https://source.unsplash.com/random');` instead, you would have different images in the same page ... but as you could get weird off-topic images, why not a simple array with id's and choose one from each? as `$(this).attr('src', 'https://source.unsplash.com/collection/${getRandomId()}');` and for random algorithm, [try this answer](https://stackoverflow.com/a/5915122/28004) – balexandre Mar 03 '20 at 17:07

0 Answers0