using an array from PHP in a JS file

Question

I have an array in my index.php which is created by a foreach:

foreach ($events as $eventkey =>$event)
                {
                    echo "<li class='desktop-2 tablet-1 mobile-1'>".$event->title."<span class='eventLetter'>A</span><br/><span class='eventLocation'>".$event->city."</span></li>";
                    $LocationArray[]= $event->latlng;
                }

                json_encode($LocationArray);

Now I want to use this array, in my javascript ( which is written in a different file..). But CAN I do this? and if so, how? (I'm new to php, and I'm really bad at AJAX stuff etc.. I've been looking around here and other sites but I can't really find the solution.)

The plan is to be able to loop over the array in my javascript and place markers at a google map which I have on my site.

Answer 1

The simplest solution would be to insert a new script tag with a javascript variable, and then assign the php array to that variable with json_encode. JSON (JavaScript Object Notation) is a text format for data-interchange between programming languages. Because JSON is based on the JavaScript decoding is not needed on the client side.

echo '<script>var myarray = '.json_encode($LocationArray).'</script>';

Answer 2

You would ideally use AJAX and fetch the output of json_encode($LocationArray)...

so your last line needs to be

echo json_encode($LocationArray);

Once this is taken back by the JS function that initiated the AJAX call, you can convert it into an array and loop it around. (expecting you are using jQuery, the code would look something like this...)

$.ajax({
    url: 'index.php',
    success: function(response) {
        var resData = $.parseJSON(response);
        for (var i = 0; i < resData.length; i++)
        {
            alert(resData[i]);
        }
    }
});

Answer 3

The easiest way I can think of is to do an echo before you link to the JS file.

echo"<script type='text/javascript'>\n var array={";
for($i=0;$i<sizeof($array);$i++){
     echo "'".$item."'";
     if($i<(sizeof($array)-1)){
         echo",";
     }
}
echo"};\n</script>"

That has not been debugged or tested, but it should give you the idea.

Answer 4

You are expecting a valid json output right?

    <?php
    foreach ($events as $eventkey =>$event)
    {
    echo "<li class='desktop-2 tablet-1 mobile-1'>".$event->title."<span class='eventLetter'>A</span><br/><span class='eventLocation'>".$event->city."</span></li>";// remove this thing or maybe place it in a variable. do not echo it.
    $LocationArray[]= $event->latlng;
    }

    echo json_encode($LocationArray);

on your script

    $.ajax({
        url:"",
        success: function(data){
            var json = jQuery.parseJSON( data );

            for (var i = 0; i < json.length; i++) {
                alert(json[i]);
                //Do something
            }
        }
    })