echo PHP array in javascript

Question

Answer from here : https://stackoverflow.com/a/12863675/894470 is how to assign array to variable.

I'm getting my data from php but when I echo it inside javscript like example below my chart wont draw.

var month_data= [<?php echo json_encode($lol); ?>];

but I can show alert and see all my data no problem like below:

enter image description here

If I copy the text from alert and paste it in array like below:

var month_data= [{month: '2014-01', KFC: 0, PizzaHut: 1},{month: '2014-03', KFC: 2, PizzaHut: 1},{month: '2014-04', KFC: 1, PizzaHut: 0},{month: '2014-05', KFC: 0, PizzaHut: 1},{month: '2014-07', KFC: 1, PizzaHut: 0},{month: '2014-10', KFC: 42, PizzaHut: 42}];

my chart will draw. What is wrong here??

UPDATE: My query:

$lol = array();
while ($row = mysqli_fetch_array($result)) {

    $lol[] =   "{month: '". $row['year'] ."-". $row['month'] ."', KFC: ". $row['kfc'] .", PizzaHut: ". $row['pizzahut'] ."}";
}

and I'm using Morris.js: http://morrisjs.github.io/morris.js/ to generate my chart.

Regarding your update: Never build json-strings by hand. Allways build a valid php data structure and use json_encode only once. — Yoshi
– Yoshi, Commented Oct 17, 2014 at 7:38
Good thing you asked about my array. I thought the problem was with how I echo array in javascript. — sg552
– sg552, Commented Oct 17, 2014 at 8:08

Sebastien C. · Accepted Answer · 2014-10-17 07:37:23Z

2

You need a real PHP structure to encode it into JSON, not just a string:

$lol = array();
while ($row = mysqli_fetch_array($result)) {
    $lol[] = Array(
        "month"    => $row['year'].'-'.$row['month'],
        "KFC"      => $row['kfc'],
        "PizzaHut" => $row['pizzahut']
    );
}

and:

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

json_encode will automatically translate $lol into a json array containing objects (associative arrays are translated into objects).

answered Oct 17, 2014 at 7:37

Sebastien C.

4,8612 gold badges24 silver badges33 bronze badges

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

3 Comments

sg552 Over a year ago

Thanks for the explanation. It does worked. May I know how I can see my array data? alert (month_data); don't show anything.

sg552 Over a year ago

OK so googling brought me back to SO about how to see my array data. Really weird because the array data is not in the chart required format but my chart get drawn anyway. I should study this later. Thanks again.

Sebastien C. Over a year ago

@sg552 alert only shows the result of month_data.toString(). To view the entire object, you should use console.log(month_data) and look at the result in the debug console of your browser.

Alex Doe · Accepted Answer · 2014-10-17 07:59:28Z

1

All is fine, you just have to parse it to json format, you can do that using:

var month_data= JSON.parse('<?php echo json_encode($lol); ?>');

edit your php code like this:

$lol[] =   array("month" => $row['year'], "KFC" => $row['kfc'] ...

anyway i do not recommend using php in js, the better way would be to put the content from the variable somewhere in html and than to take it with js.

edited Oct 17, 2014 at 7:59

answered Oct 17, 2014 at 7:12

Alex Doe

9346 silver badges12 bronze badges

5 Comments

Yoshi Over a year ago

If injected directly into js-code, there is no need to parse it as this will be done by the browser/js-interpreter.

sg552 Over a year ago

Unfortunately this var month_data= JSON.parse('<?php echo json_encode($lol); ?>'); does not work.

Alex Doe Over a year ago

Well, i just tried my code without JSON.parse and the browser didn`t see it as an object

Alex Doe Over a year ago

I believe that the problem is it in your $lol variable, can you show me the error which is appearing or the content of the variable.

sg552 Over a year ago

Hi, I appreciate you're trying to help me. Fortunately it has been solved. My mistakes is with how I build my array. Thanks again.

Collectives™ on Stack Overflow

echo PHP array in javascript

2 Answers 2

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related