Passing nested PHP loop to javascript

Question

I have a PHP array that looks like this:

([NAME] => Array ( [0] => 16 [1] => 12 [2] => 4 [3] => 0 ))
([NAME2] => Array ( [0] => 19 [1] => 19 [2] => 0 [3] => 0 ))
([NAME3] => Array ( [0] => 31 [1] => 29 [2] => 2 [3] => 0 ))

This array is generated by PHP by pulling data from a database. (The array is much larger than this, but for simplicity, I only included 3 records)

I really need this data to be usable in a script that generates a bar graph. For now, I only need the name and the first record. So, for example, in PHP

<?=$array['NAME'][0]?>
<?=$array['NAME2'][0]?>

would echo the information I need from each, but I'm not sure how to put that into the format I need into javascript.

This is the javascript format that I need:

        { tech: 'NAME', value: $array['NAME'][0] },
        { tech: 'NAME2', value: $array['NAME2'][0] },
        { tech: 'NAME3', value: $array['NAME3'][0] },
        { tech: 'NAME4', value: $array['NAME4'][0] },
        ...etc

Some type of loop would be preferred because the names can vary. If it was just PHP I could do it, but I'm not too fluent in Javascript. Could someone help me come up with a solution?

You need to generate the structure that you want in php and then echo it out in javascript using json_encode(). — jeroen
– jeroen, Commented Mar 14, 2016 at 19:27
The array already exists, it's structure is already there. I'm asking specifically about the javascript part because I don't know how to put that information into a javascript variable and use it properly. — GrumpyCrouton
– GrumpyCrouton, Commented Mar 14, 2016 at 19:28

dmgig · Accepted Answer · 2016-03-14 19:49:47Z

2

The good news is that you don't have to know much javascript. Create your data structure as you want it in php, and then use json_encode: http://php.net/manual/en/function.json-encode.php

<?php
        $for_chart = array();
        foreach($names as $key => $name){
           $obj = new stdClass;
           $obj->tech = $key;
           $obj->value = $name[0];
           $for_chart[] = $obj;
        }
    ?>

the result is:

[{"tech":"NAME","value":1},{"tech":"NAME2","value":5},{"tech":"NAME4","value":9}]

You can use it in your javascript like this:

<script>
    var my_names = <?=json_encode($for_chart)?>;
    alert(my_names[0].value); // alerts "1"
</script>

http://sandbox.onlinephpfunctions.com/code/2682f09fd5515b220402db9c600b70a0501a87d9

edited Mar 14, 2016 at 19:49

answered Mar 14, 2016 at 19:28

dmgig

4,5785 gold badges40 silver badges50 bronze badges

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

8 Comments

GrumpyCrouton Over a year ago

so I can use json_encode in javascript, and that will give me that result? And then how do I actually loop through it into my javascript?

dmgig Over a year ago

No, you use json_encode in your php script. You can then use an AJAX request to get that json string. In your javascript, you'll use JSON.parse(my_php_response) to convert that into javascript arrays and objects which you can then use javascript methods on. The basic idea is that your php is server side (sending the data to your user) then the javascript is client side (the user manipulates the received data).

GrumpyCrouton Over a year ago

I'm not sure how to use AJAX for this. The only times I have used AJAX is with forms and other triggerable/clickable events - this would have to be ran every time the page was loaded.

GrumpyCrouton Over a year ago

So then I would use that array just like in javascript? E.G my_names[0][0]? I'm not sure how to loop that into the needed format

dmgig Over a year ago

Well, you have to use it like javascript: my_names[0].value

|

Anthony · Accepted Answer · 2016-03-14 19:37:21Z

1

If you json_encode the array you have, it comes out to:

{"NAME1":[16,12,4,0],"NAME2":[19,19,0,0],"NAME3":[31,29,2,0]}

which will give you a javascript object to iterate:

If you have the json object in a variable called arrayData:

var gridData = [];
for (var name in arrayData) {
  var rowObj = { tech: name, value: arrayData[name][0] };
  gridData.append(rowObj);
}

At the end of that, you will have an array of objects that should be what you're looking for in gridData.

answered Mar 14, 2016 at 19:37

Anthony

714 bronze badges

3 Comments

GrumpyCrouton Over a year ago

When you say use json_encode, do you mean to use it in javascript? EX: var name = <?=json_encode($amtArray);?>

Anthony Over a year ago

I actually misunderstood your need, here. I was thinking an AJAX request, not embedded PHP.

GrumpyCrouton Over a year ago

I'm sure it will be helpful for someone in the future :)

Graham · Accepted Answer · 2016-03-14 19:28:58Z

0

If you would echo it in the following format you can JSON to get the data:

[{tech: 'NAME', value: $array['NAME'][0]},{tech: 'NAME', value: $array['NAME'][0]}]

In your js you could do something like the following:

var names = $.getJSON('http://localhost/index.php?name', function(data) {});

This way you have an array in js.

answered Mar 14, 2016 at 19:28

Graham

1,9604 gold badges21 silver badges42 bronze badges

Comments

kpbl · Accepted Answer · 2016-03-14 19:31:18Z

0

To get the javascript code just iterate over the php array an echo the json records like you want:

<?= foreach($array as $key => $value){
     echo "{ tech: '" .$key ."', value: '" .$value[0] ."'},";
   }
?>

answered Mar 14, 2016 at 19:31

kpbl

242 bronze badges

6 Comments

GrumpyCrouton Over a year ago

Does this go directly into my javascript?

kpbl Over a year ago

ahh ok not if you have an seperate .js file

kpbl Over a year ago

but in your php file you can do this

GrumpyCrouton Over a year ago

So how can I use that in my javascript? The problem I'm having is passing any information over to javascript. My php and javascript are in the same file.

kpbl Over a year ago

if it is in the same file you can copy paste my code

|

ameenulla0007 · Accepted Answer · 2016-03-14 19:34:31Z

0

//Assuming this is your array
$getArray["NAME"]   = array(16,12,4,0);
$getArray["NAME2"]  = array(19,19,0,0);
$getArray["NAME3"]  = array(31,29,2,0);
$newArray   = array();
foreach($getArray as $indKey=>$indArrVal) {
    $newArray[] = array("tech"=>$indKey, "value"=>$indArrVal[0]);
}
echo json_encode($newArray);

here it is, create a new array, with the required indexes and then stringify it using json_encode

answered Mar 14, 2016 at 19:34

ameenulla0007

2,6831 gold badge15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Passing nested PHP loop to javascript

5 Answers 5

8 Comments

3 Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

3 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related