Flickr API加载图像

Question

Hello I am new to APIs and I am struggling a lot with the Flickr API. I tried looking up videos and articles and it was overwhelming. What I am trying to do for my project is have a user search up restaurants using the Yelp API. Once they get a list of restaurants, each list item will have a select button. When the user clicks the select button, images of that location should pop up in a div on the HTML page. I manage to get the Yelp API to work however I am struggling with how to make the images load when the user clicks the select button. I am completely lost and any help would be appreciated. Below is my code.

HTML:

<div class="col-xs-6">
    <h2 id="title">Manhattan</h2>
    <div>
    <h2>Photos</h2>
    <div id="photos"></div>
    </div>
  </div>

JavaScript:

$(document).ready(function () {
    $('#getposts_form').submit(function(event) {

    event.preventDefault();

    $('#output').empty();

    var search = $('#search').val();
    var title = $('#title').text();
    var categories = $('#categories').val();
    var price = $("#price").val();
    console.log(search);
    console.log(categories);
    console.log(price);


    $("#ajaxIndicator").modal('show');

    // make the ajax request
    $.ajax({
        url: 'yelp.php',
        type: 'GET',
        dataType: 'JSON',
        data: {
            location: title,
            categories: categories,
            price: price
        },

        success: function(serverResponse) {
            console.log(serverResponse);
            var businesses = serverResponse.businesses;
            console.log(businesses);
            var myHTML = '';
            for(var i = 0; i < serverResponse.businesses.length; i++){
                myHTML += '<li class="tweet list-group-item">';
                myHTML += '<ul class="list">'
                myHTML += '<li><span class="user"><b>' + serverResponse.businesses[i].name + '</b></span></li>';
                myHTML += '<li><span class="user">' + serverResponse.businesses[i].price + '</span></li>'; 
                myHTML += '<li><span class="user">' + serverResponse.businesses[i].latitude + '</span></li>'; 
                myHTML += '<li><span class="user">' + JSON.stringify(serverResponse.businesses[i].categories) + '</span></li>'; 
                myHTML += '<li><span class="user"><button class="btn btn-default" type="submit" id="select">Select</button></span><li>';    
                myHTML += '</ul>'
                myHTML += '</li>';
            }
            $('#output').append(myHTML);
        },

        error: function(jqXHR, textStatus, errorThrown) {
            console.log('error');
            console.log(errorThrown);
            console.log(jqXHR);
        },


        complete: function() {
            $("#ajaxIndicator").modal('hide');
        }
    });



});

//ajax call for flickr api
$('.select').submit(function(event) {

    event.preventDefault();

    $('#photos').empty();

    var lat = $('#lat').val();
    var long = $('#long').val();



    $("#ajaxIndicator").modal('show');

    make the ajax request
    $.ajax({
        url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="here i added my own key"&format=json&nojsoncallback=1',
        type: 'GET',
        dataType: 'JSON',
        data: {
            //lat: lat,
            //long:long,
        },

        success: function(serverResponse) {

            console.log("flickr");
            console.log(data);
        },

        error: function(jqXHR, textStatus, errorThrown) {
            console.log('error');
            console.log(errorThrown);
            console.log(jqXHR);
        },


        complete: function() {
            $("#ajaxIndicator").modal('hide');
        }
    });

});

Answer 1

What you need to do is

• Extract the urls and store them in an array

• Loop through array, creating a new child image with the src set correctly

  var photos = $("#photos")
  
  for (var i = 0; i < arr.length; i++) {
      var image = "<img src=" + encodeURL(arr[i]) + "></img>"
      photos.append(image)
  }
  

I think that you should focus on simpler apis for the time being