Flickr Image retrieval in json format with Javascript

Question

I have been struggling with a flickr search for a while now. Initially I was retrieving an XML file with PHP and converting it to simpleXML but I couldn't get Javascript to access the information to build the links to the images. Very frustrating!

So I've decided to simplify it a bit by ditching the PHP and swap to javascript getting the links using json.

1. I have a problem getting the text entered into the textbox to populate in the flickr request.

2. When I manually use a text term in this link it retrieves image boxes without the images. When I click on the image boxes the link to Flickr works.

What am I doing wrong?!

Any help would be very much appreciated as I've tried 3-4 different ways now and still feel like I am getting nowhere!

Thanks Mike

    <script type = "text/javascript">
        function jsonFlickrApi(rsp){ 
            window.rsp = rsp;

            var display = "";

            // loop through the objects to build the images from the json response

            for(var i=0; i<rsp.photos.photo.length; i++){
                photo = rsp.photos.photo[i];

            // use the various elements of the json object to build the link

                details_url = "http://farm" +photo.farm+ "static.flickr.com/" +photo.server+ "/" +photo.id+ "_" +photo.secret+ "_" + "t.jpg"; <!-- get
                owner_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
                display += '<a href="' + owner_url + '">' + '<img alt="'+photo.title + '"src="' + details_url + '"/>' + '</a>';
            }
            // display the images
            document.writeln(display);

        }

    </script>

This is a flickr search

<!-- the form is supposed to take a request from the user -->

<form id="flickr_form">
    <input type="text" name="search" id="search"/>
    <input type="submit" value="Search"/>

</form>

<script src = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=0a109e625227a913ef57ac207f1af24f&text="+document.getElementById("search").value+"&per_page=10&format=json">

   </script>

Answer 1

1) Your JS command in the script's src line doesn't get executed. I can suggest two alternatives of getting the search box value into the URL:

• Since you mentioned PHP, why not simply use the form to submit normally using GET (method="GET") and construct the src URL from that? You could just replace "+document.getElementById("search").value+" with <?=urlencode($_GET['search'])?> and that should work for a start. The page will be loaded one more time than through JS but this is probably the quickest solution to that problem. It is only for testing purposes though, on an actual website this would just be bad style.
• Alternatively, you can write a function to be executed when the form is submitted, eg like <form onsubmit='load_flickr(this);return false;'> and you should be able to access this.search.value within load_flickr , build the flickr request URL from that and then load the script.

2) What's that <!-- get at the end of the details_url line? I'm assuming that's just a mistake with copy+paste here and not actually in your own code.

3) Probably the most important mistake: You're missing a fullstop before "static" in your image URL ( farmX.static.flickr.com not farmXstatic.flickr.com ):-)