How to pass data from PHP array to 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?

Possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — TIGER, Dec 20 '16 at 06:25

madalinivascu · Answer 1 · 2016-12-20T06:56:27.470

4

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/

edited Dec 20 '16 at 06:56

answered Dec 20 '16 at 06:22

madalinivascu

32,064
4
39
55

Thanks for this answer. I tried this method but it does not work. I think the problem is the way I pass the date from PHP to javascript. When I use the javascript array, it works fine. But I do not know how to convert the PHP date to javascript in this case. – sjerez Dec 20 '16 at 06:35
@madlin the `dataSource` should be an array not string – Azad Dec 20 '16 at 06:37
@azad its madalin not madlin, i've updated my answer – madalinivascu Dec 20 '16 at 06:45
1

oops @madalinivascu – Azad Dec 20 '16 at 06:47
@SergioJerezConde see http://stackoverflow.com/questions/10286204/the-right-json-date-format – madalinivascu Dec 20 '16 at 06:54
Thank you very much again, @madalinivascu, but it's still not working. In your own example (in http://jsfiddle.net) if I run the code, the days is not lighting. But if I remove "dataSource: data" and I write "dataSource: [{startDate: new Date(2016, 1, 4),endDate: new Date(2016, 1, 4)}", it's working fine. – sjerez Dec 20 '16 at 14:21
the jsfiddle from my answer works properly as you can see in the first month – madalinivascu Dec 20 '16 at 17:34
@madalinivascu, I mean, in this jsfiddle the script is only showing the calendar, but the days (the dates) are all in the same color, are not "rendered". However, if I replace "dataSource: data" by "dataSource: [{startDate: new Date (2016, 1, 4), endDate: new Date (2016, 1, 4)}]" (for example) and run the code, the date is renderer correctly, I mean, in the calendar I can see this date renderer. – sjerez Dec 20 '16 at 19:19
@sjerez remove the s in https man i didn't find any cdn over https , didn't you see the errors in the console?this should work over http – madalinivascu Dec 21 '16 at 05:10

score 0 · Answer 2 · answered Dec 20 '16 at 06:23

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
    });
});

score 0 · Answer 3 · edited Dec 20 '16 at 06:35

0

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>

edited Dec 20 '16 at 06:35

claudios

6,588
8
47
90

answered Dec 20 '16 at 06:32

Amit Udale

1

How to pass data from PHP array to Javascript

3 Answers3