JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

cannot read property 'm' of undefined

This is my code:

code

$(document).ready( function () {
    $('form').submit(function (evt){
        console.log('hola');
        evt.preventDefault();
        var $tag = $('#search').val();
        var url = 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
        var data = {
            tags: $tag,
            format:"json"
        };
        console.log($tag);
        function callback (response) {
            $.each(response, function (i, photo){
                console.log(response);
            var photosHTML = '<li class = "grid-25 tablet-grid-50">';
                photosHTML += '<a href = " ' + photo.link +  ' " class = "image">'; 
                photosHTML += '<img src = " ' + photo.media.m + ' "></img></a></li>';
            });
            $('#photos').html(photosHTML);
        }
        $.getJSON(url, data, callback)
    }); // event listener
}); // doc ready

The weird thing is that there's no such problem with the 'photo.link' property. I already checked the JSON file that I get as response and it includes the photo.media.m property. What I am doing wrong?

1 Answer

Steven Parker
Steven Parker
182,590 Points

When posting code, please use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

But I manged to decipher it and noticed several differences from the video code:

  • the "each" is looping through the data object directly and not the "items" property (causing the main issue)
  • the list items are not being wrapped in the <ul> element
  • each list item overwrites the previous one(s) instead of adding to them

I see, thank you very much as always!