javascript - json_encode not preserving order

Question

I have a multi dimensional array, in PHP:

Array
(
[1] => Array
    (
        [19] => Array
            (                    
                [type] => 2
            )            
        [6] => Array
            (                    
                [type] => 4
            )
        [12] => Array
            (                    
                [type] => 3
            )
    )

)

When i json_encode this array in javascript via:

 var jsonArray = <?php echo json_encode($above_array); ?>;

i get:

 Object
 (
 [1] => Object
 (
    [6] => Object
        (                    
            [type] => 2
        )
    [12] => Object
        (                    
            [type] => 4
        )
    [19] => Object
        (                    
            [type] => 3
        )
)

)

I want to preserve the first order and not the second one by id.

Answer 1

There's a question on StackOverflow Does JavaScript Guarantee Object Property Order? In short, the answer is no, it doesn't. So when converting a PHP array to a Javascript object, the key order will not be preserved.

The major difference between arrays in PHP and Javascript is that the latter can hold only sequential integer keys starting from zero. So it's not always possible to convert a PHP array to a Javascript array. Let's look at a few examples:

// example 1
echo json_encode(array(0 => 'a', 1 => 'b')) // outputs ["a","b"]

// example 2
echo json_encode(array(0 => 'a', 3 => 'b')) // outputs {"0":"a","3":"b"}

// example 3
echo json_encode(array(3 => 'b', 0 => 'a')) // outputs {"3":"b","0":"a"}, but in Javascript the key order will be the same as in example 2

1. In the first example, json_encode converts a PHP array into an identical Javascript array.
2. In the second example, it converts to an object, because the keys order is not sequential.
3. In the third example, it also converts to an object. But in Javascript, the objects 2 and 3 will be the same, with the same key order, even though the keys are listed in a different order. So it's not json_encode function that is not preserving the key order, but Javascript itself.

Returning to our question: how to pass a PHP array to Javascript preserving the key order? One approach is to wrap PHP key-value pairs into arrays:

// original array:
array(
    3 => 'b', 
    0 => 'a'
)

// must be converted to:
array(
    array(3, 'b'),
    array(0, 'a')
)

Then json_encode will result in the following Javascript array:

[
  [3,"b"],
  [0,"a"]
]

And the last part is iterating through such an array in Javascript:

var php_encoded_array = [
  [3,"b"],
  [0,"a"]
];

for (var i=0; i < php_encoded_array.length; i++) {
  var rec = php_encoded_array[i],
      key = rec[0],
      value = rec[1];

  console.log(key + ': ' + value);
}
// It will output:
// 3: b
// 0: a
// Which is the exact same order as in the PHP array

This approach is also compatible with non-integer keys.

Here's the code (suggested by pr1001 in a similar question) for converting an array on the PHP side. It will work for one-dimensional arrays.

array_map(
    function($key, $value) { return array($key, $value); },
    array_keys($data),
    array_values($data)
)

And here's a recursive function implementation for multi-dimensional arrays:

function array_preserve_js_order(array $data) {
    return array_map(
        function($key, $value) {
            if (is_array($value)) {
                $value = array_preserve_js_order($value);
            }
            return array($key, $value);
        },
        array_keys($data),
        array_values($data)
    );
}