如何将数据从PHP数组传递到Javascript

Question

I'm trying to use the bootstrap-year-calendar and I'm not able to pass the values in the correct way.

I have an array with the data in this way:

<?php

$data = array(
    array(
        "startDate" => "2016-1-4",
        "endDate" => "2016-1-4"
    ),
    array(
        "startDate" => "2016-1-8",
        "endDate" => "2016-1-8"
    ),
    array(
        "startDate" => "2016-1-16",
        "endDate" => "2016-1-16"
    )
);

?>

but I have to do something like this:

<?php // I have here my $data array ?>

<div id="calendar"></div>

<script>

$(function() {  
    $('#calendar').calendar({
        dataSource: [
            {
                startDate: new Date(2016, 1, 4),
                endDate: new Date(2016, 1, 4)
            },
            {
                startDate: new Date(2016, 1, 8),
                endDate: new Date(2016, 1, 8)
            }
            ,
            {
                startDate: new Date(2016, 1, 16),
                endDate: new Date(2016, 1, 16)
            }
        ]
    });
});

</script>

How can I pass my $data array to the 'datasource' variable?

Answer 1

Use json:

Do something like

<?php

$data = array(
    array(
        "startDate" => "2016-1-4",
        "endDate" => "2016-1-4"
    ),
    array(
        "startDate" => "2016-1-8",
        "endDate" => "2016-1-8"
    ),
    array(
        "startDate" => "2016-1-16",
        "endDate" => "2016-1-16"
    )
);
echo '<script>var data = '.json_encode($data).'</script>';
?>

<script>
$.each(data, function(i, v) {
  $.each(v, function(x, t) {
   data[i][x] = new Date(t);
  });
});
$(function() {  
    $('#calendar').calendar({
        dataSource: JSON.parse(data)
    });
});

</script>

Ps: you may need to joggle a bit with the dates

demo: http://jsfiddle.net/jnp2ssts/1/

Answer 2

You can do something like while page is loading (if it's a PHP page) or if data is received using AJAX

var data = <?php echo json_encode($data); ?>;

then simply use this variable with datasource as

dataSource : data

Final code will look like something like

var data = <?php echo json_encode($data); ?>;
$(function() {  
    $('#calendar').calendar({
        dataSource: data
    });
});

Answer 3

Yes, you can use json_encode()

<---Your array in php--->
<script type="text/javascript">

    var jArray= <?php echo json_encode($phpArray ); ?>;

    for(var<your loop>){
        alert(jArray[i]);
    }

 </script>