Creating an JS array from PHP

Question

I'm developing a Google Geochart and I'd like it to be dynamic. This is the static code to make the array to store the two values are as follows. The Country is the unique identifier for the map and the colour value is what the colour of the map will be. (Irrelevant but context)

  arrayData = [['Country','Color Value'],
  ['China',3],
  ['Russia',2.6],
  ['France',2.5],
  ['Spain',2.4],
  ['Portugal',1.1]

I'd like to be able to make this array from a for loop taken from php echo values. Something like this pseudo code;

for (i in range table.length)

 arrayData = [['Country','Color Value'],

 [<?php echo $statements["Country"]; ?>], [<?php echo $statements["Color_Value"]; ?>],

So similar to a php table as it gets all the values, I would like to do the same but for a JavaScript array. Any advice would be kind!

EDIT: The static code is an example, I want to take values from the database, the first value being country and the second value being colour value. BOTH from the database. I suppose in turn making the geochart dynamic

check [this answer](https://stackoverflow.com/a/62063641/5090771)... — WhiteHat, Jun 02 '20 at 17:10
How would I iterate this for multiple countries? This example is not able to pull multiple values from the database — Charlie, Jun 02 '20 at 17:30
in the example, multiple entries are added to the array in the `while` loop... — WhiteHat, Jun 02 '20 at 18:00

score 1 · Answer 1 · answered Jun 02 '20 at 16:06

1

The function you are looking for is json_encode(), but it would be more useful if you first structured your input array.

So something like the following:

// Some code here to generate $arrayData from $statements, giving the following

$arrayData = [
  ['Country' => 'China', 'Color Value' => 3],
  ['Country' => 'Russia', 'Color Value' => 2.6],
  ['Country' => 'France', 'Color Value' => 2.5],
  ['Country' => 'Spain', 'Color Value' => 2.4],
  ['Country' => 'Portugal', 'Color Value' => 1.1]
];


// Then, once you have generated $arrayData

echo json_encode($arrayData);

answered Jun 02 '20 at 16:06

Dezza

1,094
4
22
25

How would I receive this array from Server-Side? – Charlie Jun 02 '20 at 16:54
That depends on the architecture of your application. If you have a front-end javascript application, you could make an XMLHttpRequest to the server and have the server return the data with a content-type of application/json. Alternatively, if your html is being generated by the server, it could be embedded somewhere on the page to be picked up later? – Dezza Jun 02 '20 at 19:15

Andrey Yerokhin · Answer 2 · 2020-06-02T17:03:41.123

1

You need to prepare array in php first and than just echo json_encode($arr):

<?php

$data = [];
foreach ($something as $statements) {
   $data[] = [$statements["Country"], $statements["Color_Value"]]; 
}
$arrayData = json_encode($data);
?>
arrayData = <?= $arrayData ?>;

edited Jun 02 '20 at 17:03

answered Jun 02 '20 at 16:08

Andrey Yerokhin

273
1
7

Vivek Choudhary · Answer 3 · 2020-06-02T17:27:24.603

0

//First you need to check the structure of the result from your database query
//Then Loop through the result Object/Array to get the desired structure
//Most Common way of doing this is foreach loop 

//define an blank array 
$chart = [];

//put your axis tags/ texts in on first index
$chart[] = ['Country', 'Colour Count'];

//let's say $reult stores the data fetched from database

foreach ($result as $key => $value){
    //let's assume $value has field with country name as value 
    //and field colour_count have color count values, so
    // $value->country = Country Name
    //$value->colour_count = Color Count Value
    $chart[] = [$value->country, $value->colour_count];
}
// Once the Loop is finished, you will get an array with your desired format

//$chart = [['Country', 'Colour Count'],['France', 12],['USA',34],.....so on];

edited Jun 02 '20 at 17:27

answered Jun 02 '20 at 16:27

Vivek Choudhary

634
8
14

I wasn’t clear enough in my question, I’m asking how to receive the array from values from a database as oppose to creating a static array in the .js file – Charlie Jun 02 '20 at 16:52
In that case, get the data from the database. Loop in to get the desired structured array and then just use json_encode() to prepare the dynamic graph. – Vivek Choudhary Jun 02 '20 at 17:00
Would you be kind enough to write an example for me? This is my first time with server-side integration – Charlie Jun 02 '20 at 17:02
Do you know how to fetch data from the database? – Vivek Choudhary Jun 02 '20 at 17:07
My main problem is displaying the array in the same format so that google accepts it – Charlie Jun 02 '20 at 17:08
Yes I know how to fetch data, but not sure how to keep it in the same format as google want, the format is the static array above which i want to make dynamic from the MySQL database – Charlie Jun 02 '20 at 17:08

Creating an JS array from PHP

3 Answers3