Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    transfer json data to another function

    Hy there,

    I'm new to javascript and json and try to build a site, where I can pick a location on google maps and get pictures from instagram.

    This is working well, but now I want to add a function which opens a popup with a bigger picture.

    The problem is, I don't know how to transfer the data I get from the instagram API to my new function, maybe someone can give me a hint?

    here's my code so far:

    PHP Code:
    ...
    <
    script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    </head>
    <body onload="initialize()">
        <h1>search pictures</h1>
        <div id="map"></div>
        
        <label>Latitude:</label> <input type="text" name="latitude" id="latitude" /><br/>
        <label>Longitude:</label> <input type="text" name="longitude" id="longitude" /><br/>
        <input type="button" value="suchen" onclick="searchInstagram()" />

        <div id="bilder" onclick="show(event)"></div>
        
        <div id="popup"></div>

    <script type="text/javascript">
        ..

        var popup = document.getElementById("popup");

        //Instagramm
        function searchInstagram(){
            //script-Tag erstellen
            var input_lat = document.getElementById("latitude");
            var input_lon = document.getElementById("longitude");
            
        var lat = input_lat.value;
            var lon = input_lon.value;
                    
        input_lat.value = "";
            input_lon.value = "";
            var url = "https://api.instagram.com/v1/media/search?lat="+lat+"&lng="+lon+"&distance=5000&client_id=xxx&callback=getFromInstagram";
            
            var jsonp = document.createElement("script");
            jsonp.setAttribute("type", "text/javascript");
            jsonp.setAttribute("src", url);

            var jsonpEl = document.getElementsByTagName("body")[0].appendChild(jsonp);
            jsonpEl.parentNode.removeChild(jsonpEl);
        }
        
        function getFromInstagram(json){
            
            var insta = json.data;        
            console.log(insta);
            
            var bilder = document.getElementById("bilder");

            while(bilder.firstChild) {
                    bilder.removeChild(bilder.firstChild);
            }
            
            for (var i in insta){        
                var img = document.createElement("img");
                var url = insta[i].images.standard_resolution.url;
                img.setAttribute("src", url);

                var div = document.createElement("div");
                div.className = "images";
                div.appendChild(img);

                bilder.appendChild(div);
            }           
        }
        
        //Pop-Up for images
        function show(event){

            if(event.target){   
                var el = event.target;
            }else{
                //srcElement für IE
                var el = event.srcElement;
            }

            while(popup.firstChild){
                popup.removeChild(popup.firstChild);
            }

            console.log("function show:");
            //console.log(insta);

        }
    </script>
    </body>
    </html> 
    in function show() I want to use the data from instagram (var insta in function getFromInstagram), how can I do that?

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,446
    Thanks
    13
    Thanked 361 Times in 357 Posts
    there are two general options here:
    - make a Closure
    - save the JSON in a custom property of the element
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey I would suggest checking out this JSON Data site. It will help you put data in multiple places and update them in real time. Hope this helped.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •