current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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      
}
share|improve this question
    
try var exam_grades = JSON.parse(<?php echo json_encode($exam_grades );?>); –  imnancysun Jan 14 at 0:54
    
console.log() is your friend –  castis Jan 14 at 0:59
    
@imnancysun thanks for your quick response, but it doesn't work. the alert does not even popup :( –  sunrisepoet Jan 14 at 1:00
1  
No, no no. A PHP associative array IS a js object. Javascript has no notion of associative arrays. –  tacone Jan 14 at 1:07
1  
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. Jan 14 at 1:20

4 Answers 4

up vote 1 down vote accepted

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

share|improve this answer
    
thanks. I marked this as the correct answer because was the most straight forward. –  sunrisepoet Jan 14 at 1:14
    
@sunrisepoet sure im glad this helped –  Ghost Jan 14 at 1:15
up vote 1 down vote

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.

share|improve this answer
up vote 1 down vote

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]);
    }
}
share|improve this answer
1  
thanks. I voted up because of the clear explanation. –  sunrisepoet Jan 14 at 1:14
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.