passing php array to javascript using ajax

Question

I'm building something with Google Maps and Instagram. I'm trying to send the coordinates of the Instagram photos from my PHP file to my JavaScript file using AJAX. I basically have no idea how to handle this on the JavaScript side.

This is what my index.php file looks like:

<?php

$jsonText= file_get_contents("");

$instagram = json_decode($jsonText);


foreach ($instagram->data as $photo) {

$longitude = $photo->location->longitude;
$latitude = $photo->location->latitude;
$picture = $photo->images->thumbnail->url;

$results = array($latitude, $longitude, $picture);
echo json_encode($results, true);
}
?>

My js file looks like this:

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(45.525961, 15.255119)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);



$.ajax({
    url: 'index.php',
    dataType: 'json',
    success: function(data) {

        var location = new google.maps.LatLng();

        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title:"Where the photo was taken.."
        });
    }
})

}

Just put your marker creation in a loop and loop through your json results creating new markers of the data — Joe Swindell
– Joe Swindell, Commented Mar 19, 2015 at 20:29
@JoeSwindell But how do I use the coordinates I send? I can't just do 'var location = new google.maps.LatLng(latitude, longitude);' — user4691546
– user4691546, Commented Mar 19, 2015 at 20:41
Sure you can. Put it in a loop, and with each location it creates push it to an array. Then you'll have an array of map locations. — Joe Swindell
– Joe Swindell, Commented Mar 19, 2015 at 20:44

Himanshu · Accepted Answer · 2015-03-19 20:53:41Z

1

First of all, I would suggest you not to share your API Key/Access Token publicly.

I made slight changes to your code. This is the ajax call now,

$.ajax({url: 'test.php'}).done(function(data) {
            // alert(data);
            for (var i = data.length - 1; i >= 0; i--) {
                for (var j = data[i].length - 1; j >= 0; j--) {
                    $("#someElement").append(data[i][j]);
                };
            };
        }
);

You can use the data as you wish.

answered Mar 19, 2015 at 20:53

Himanshu

2121 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

passing php array to javascript using ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related