Iterate javascript object from echoed json encoded array from PHP

Question

I'm trying to get values from a PHP array in Javascript and populate a chart.

The problem is I believe that the javascript variable is not receiving the values.

I tried printing out the values, but nothing happens. Also it shows as object instead of an array, i don't know if it's suppose to be like that.

Any help will be greatful.

The PHP array when printed out:

print_r("<pre>"); 
print_r($exam_grades);
print_r("</pre>");

Array
(
    [History] => 70
    [Sociology] => 40
    [Psychology] => 32
    [Criminology] => 64
)

JS:

var exam_grades = <?php echo json_encode($exam_grades );?>;
alert(exam_grades.length); // this shows as undefined
for (var i = 0; i < exam_grades.length; i++) {

    // do something      
}

try var exam_grades = JSON.parse(<?php echo json_encode($exam_grades );?>); — imnancysun
– imnancysun, Commented Jan 14, 2015 at 0:54
@imnancysun thanks for your quick response, but it doesn't work. the alert does not even popup :( — sunrisepoet
– sunrisepoet, Commented Jan 14, 2015 at 1:00
No, no no. A PHP associative array IS a js object. Javascript has no notion of associative arrays. — tacone
– tacone, Commented Jan 14, 2015 at 1:07
The structure called an Array in PHP is closer to the structure called an Object in JavaScript than the more specific Array special case of Object. — Paul S.
– Paul S., Commented Jan 14, 2015 at 1:20

Kevin · Accepted Answer · 2015-01-14 01:01:30Z

2

As an alternative, you could also use for in to iterate thru the object:

<?php $exam_grades = array('History' => 70, 'Sociology' => 40, 'Psychology' => 32, 'Criminology' => 64); ?>
<script type="text/javascript">
var exam_grades = <?php echo json_encode($exam_grades); ?>;
for(var key in exam_grades) {
    var value = exam_grades[key];
    console.log(key + ': ' + value);
}
</script>

Sample Output

answered Jan 14, 2015 at 1:01

Kevin

41.9k12 gold badges57 silver badges72 bronze badges

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

1 Comment

sunrisepoet Over a year ago

thanks. I marked this as the correct answer because was the most straight forward.

lsouza · Accepted Answer · 2015-01-14 00:59:34Z

1

Your problem is that the JS Array haven't associative indexes, so your PHP array turns into a JS object. You could try to rewrite your PHP array like this:

$grades = [
    ['exam' => 'History', 'grade' => 70],
    ['exam' => 'Sociology', 'grade'  => 40],
    ['exam' => 'Psychology', 'grade'  => 32],
    ['exam' => 'Criminology', 'grade'  => 64]
];

Then you can iterate fine on JS, after the json_encode.

answered Jan 14, 2015 at 0:59

lsouza

2,4984 gold badges26 silver badges39 bronze badges

Comments

chiliNUT · Accepted Answer · 2015-01-14 01:04:23Z

1

A php associative array will json encode into a javascript object, because javascript does not have true associative arrays as php does. The length is undefined because javascript objects do not have a native length property. To loop thru the object you can do:

for (var key in exam_grades) 
{ if (exam_grades.hasOwnProperty(key)) { 
    console.log(key + " -> " + exam_grades[key]);
    }
}

answered Jan 14, 2015 at 1:04

chiliNUT

19.5k14 gold badges72 silver badges116 bronze badges

1 Comment

sunrisepoet Over a year ago

thanks. I voted up because of the clear explanation.

Ja͢ck · Accepted Answer · 2015-01-14 01:08:21Z

1

The variable is an object (because the array in PHP has string keys), which you can iterate over using Object.keys():

Object.keys(exam_grades).forEach(function(key) {
    console.log(key + ': ' + exam_grades[key]);
});

Do note that object properties in JavaScript aren't ordered by definition, so if that's important, you should consider creating a numerically indexed array in PHP.

edited Jan 14, 2015 at 1:08

answered Jan 14, 2015 at 1:02

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Collectives™ on Stack Overflow

Iterate javascript object from echoed json encoded array from PHP

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related