Passing json encoded MultiDimensional Array to javascript via onclick event

Question

Passing a multidimensional array to javascript via onClick event and sub-arrays are being read only as object.

This is the json_encoded array:

{
    "products": {
        "41::": {
            "key": "41::",
            "product_id": "41",
            "name": "iMac",
            "model": "Product 14",
            "shipping": "1",
            "image": "data/demo/imac_1.jpg",
            "option": [],
            "download": [],
            "quantity": 3,
            "minimum": "1",
            "subtract": "1",
            "stock": true,
            "price": 100,
            "total": 300,
            "reward": 0,
            "points": 0,
            "tax_class_id": "9",
            "weight": 15,
            "weight_class_id": "1",
            "length": "0.00000000",
            "width": "0.00000000",
            "height": "0.00000000",
            "length_class_id": "1"
        }
    },
    "token": "17263a44810f21b88362f908d2c4be02",
    "customer_id": "1"
}

Which returns perfectly when json_decoded in php, but in javascript via console.log(data):

{products: Object, token: "17263a44810f21b88362f908d2c4be02", customer_id: "1"}

The php:

`<a id="button-checkout" class="button" onclick='checkOut(<?php echo $json; ?>)'>
        <span>Process Cart to Order</span></a>`

The javascript:

function checkOut(data) {
    console.log(data);
    return false;
}

Am I missing a step?

Answer 1

The issue is that PHP Arrays != JavaScript Arrays.

In PHP, arrays can have indices that are non-numeric (aka a hash table or associative array). In JavaScript, the only arrays there are are those with numeric indices. Everything else is an object. The JSON you have above represents an object in javascript.

Check your console log again. I know in chrome you can expand the object keys, and I bet you will find that all of your data is there.

Answer 2

That's exactly expected. You are logging the data object, which contains three properties. The first property is named products and it's type is Object, the second is named token and it's type is string which is outputted, and the last is customer_id whose value is 1. If you were to call:

console.log(data.products)

you would get a log of the properties of the products object. You could do this for each of the properties of each of the objects to log their values. You can think of JavaScript objects as a hash of key value pairs, where the value could be anything including another hash of key value pairs.