Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript global var outside of each loop help

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #161309
    clayton47
    Participant

    I have been working on a script with an api. I am trying to return the image in a bootstrap modal when the “a” element is clicked. Its breaking my each loop and only returning 1 image, and its not displaying in the modal when clicked. However I can see the img url in my console so its kind of right I think. At first I had the click function inside the loop and when you would click one image it would return all of the images on the page in the modal. So I started looking into creating a variable that I could access outside of the each loop. I am very novice with jQuery – I completed the codeacademy lesson on it. And I am about 35% complete with the javascript lesson. So I am a noob. Here is the chunk of code of the function containing the loop and click function. What am I missing?

    Thanks, Clayton –

    function success (instagramData) {
                 // This is run if the ajax call is successful
                 // The "instagramData" being passed to this function is the returned data from the url
    
                    if (instagramData.meta.code !== 200) {
                    // If we don't get a 200 that means instagram threw an error.
                    // Instead of adding the html for images to .results div, we will put the error in there so
                    // we know what happend
                        $('.results').html('<h1>An Error Occured</h1><p>' + instagramData.meta.error_message + '</p>');
                        return;
                    }
    
                    var gramimgData = 'gramimgData';
    
                    $.each(instagramData.data, function(index, gram) {
                   // instagramData.data is the "data" inside the returned json. There is "meta" and "data".
                   // index is just an incremental number for each gram. we don't need it yet.
                   // gram is the information for EACH gram. this $.each loops over all of them.
    
    
                        if (gram.type === 'image') {
                        // for this example we only care about images
                            $('.results').append('<div class="col-md-3">' +
                                          '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                          '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/></a>' +
                                          '</div>');
    
                        }
                        if (gram.type === 'video') {
                        // for this example we only care about videos
                            $('.results').append('<div class="col-md-3">' +
                                          '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                          '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/></a>' +
                                          '</div>');
                        }
    
                        gramimgData = $(gram.images.standard_resolution.url);
    
                    });
    
                    //click function for returning images in modal. 
    
                    $('a').click(function(){
                        $('.modal-body').append('<img src="' + gramimgData + '">');
                        console.log('click');
                    });
                }
    
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.