PHP에서 echoed json 인코딩 된 배열에서 자바 스크립트 객체 반복

Question

자바 스크립트에서 PHP 배열의 값을 가져 와서 차트를 채우려고합니다.

문제는 자바 스크립트 변수가 값을받지 못한다고 생각합니다.

값을 인쇄하려고했지만 아무 일도 발생하지 않았습니다. 또한 그것은 배열 대신 객체로 보여 주며, 나는 그렇게 생각하는지 모르겠습니다.

도움이 될 것입니다.

PHP의 배열 인쇄 :

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  
} 

Answer 1

대안으로, 당신은 또한 객체를 통해 반복하는 for in을 사용할 수있는 당신이 할 수있는, (PHP의 배열 문자열 키를 가지고 있기 때문에)

<?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

Answer 2

귀하의 문제는 JS 배열이 연관되지 인덱스를 가지고있다 그래서 당신의 PHP의 배열은 JS 객체로 변합니다. 이처럼 PHP 배열을 다시 시도 할 수 있습니다 :

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

그런 다음 당신은 json_encode 후, JS에서 잘 반복 할 수 있습니다.

Answer 3

변수가 객체이다 Object.keys()를 사용하여 반복 :

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

자바 스크립트에서 객체의 속성을 유의 마십시오 definit으로 정렬되지 않습니다 따라서 중요하다면 PHP로 수치 적으로 색인 된 배열을 만드는 것을 고려해야합니다.

Answer 4

php associative array는 json이 자바 스크립트 객체로 인코딩합니다. 왜냐하면 javascript에는 php처럼 실제 연관 배열이 없기 때문입니다. javacript 객체에는 기본 길이 속성이 없으므로 length은 정의되지 않습니다. 객체를 반복하려면 다음을 수행하십시오.

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