php multi dimensional array to javascript not accesible through loop

Question

I am trying to pass a multidimensional array from php(values inserted dynamically in real scenario) to javascript and later those values are used inside the javascript, when I am trying to print the same using loop, the values are not getting printed, when I have checked the array[0].length it is shown undefined

Values getting printed when used with static indexes. PFB image for reference -

Could anyone please correct me where's my mistake, I have been trying to figure this out from long time, unable to get it to work. Any help is appreciated. Thanks.

<?php
// PHP array
$myArray = array();
$myArray[] = array("id" => 1, "data" => 45);
$myArray[] = array("id" => 3, "data" => 54);
$myArray[] = array("id" => 2, "data" => 69);

$json = json_encode($myArray);
echo $json;
?>


<script type='text/javascript'>
// pass PHP array to JavaScript 
var books = <?php echo json_encode($myArray, JSON_PRETTY_PRINT) ?>;


// how to access 
for (var i=0;i<books.length;i++){
    for (var j=0;j<Object.keys(books[i]).length;j++){
       document.write("In Loop: "+books[i][j]);
    }
} 

console.log("Books length: "+books.length+"\n");
console.log("Books[0] length: "+books[0].length+"\n");

console.log("Out Loop: "+books[0]["id"]+"\n");
console.log("Out Loop: "+books[0]["data"]+"\n");
console.log("Out Loop: "+books[1]["id"]+"\n");
console.log("Out Loop: "+books[1]["data"]+"\n");
console.log("Out Loop: "+books[2]["id"]+"\n");
console.log("Out Loop: "+books[2]["data"]+"\n");
</script>

JS Objects don't have a length property. Use this to get the object's length: Object.keys(books[0]).length — JJJ
– JJJ, Commented Nov 18, 2017 at 23:19
Hey Josan, thanks for the reply, I though it worked alright, but the size and the values are being printed as "undefined" again — Prashanth kumar
– Prashanth kumar, Commented Nov 18, 2017 at 23:29

charlietfl · Accepted Answer · 2017-11-19 00:07:56Z

2

In your example books[i] is an object. It has properties id and data.

But j in the loop is an integer so as example books[0][0] is undefined since the object has no property named "0".

If you want to loop over the properties of each books[i] object you can use a simple for in loop:

var books =[
 {id:1, data:45},
 {id:3, data:54},
 {id:2, data:69}
];


// how to access 
for (var i=0;i<books.length;i++){
    for (var prop in books[i]){
       document.write("In Loop: " + prop + '=' + books[i][prop] +'<br>');
    }
}

edited Nov 19, 2017 at 0:07

answered Nov 18, 2017 at 23:40

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

6 Comments

Prashanth kumar Over a year ago

Hi, what if I want to use 1, 45 in the first iteration? how can i achieve that?

charlietfl Over a year ago

Can use Object.values(books[i]).join(', ') to produce string like "1, 45" and get rid of the for/in loop

charlietfl Over a year ago

Strongly suggest also that you forget document.write() even exists and use dom insertion methods instead. document.write() is very very rarely used in modern javascript

Prashanth kumar Over a year ago

Yes @charlietfl, This is just rough code for testing. Actually in my original requirement, I would have two variables say "id" and "data" and i will send them as parameters to another function inside this loop, so I would like to set 'em like this id = prop.value(id); data = prop.value(data); Is it possible to do so?

charlietfl Over a year ago

probably but I don't get it... why would you need a function and not just use id = book[i].id?

|

Collectives™ on Stack Overflow

php multi dimensional array to javascript not accesible through loop

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related