CODEWITHSUNDEEP
javascriptphpjson
croppio.com
croppio.com

Reputation: 1883

json_encode not preserving order

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.

Upvotes: 30

Views: 23599

Answers (4)

Antony
Antony

Reputation: 4364

As this is an age old issue - I wanted to chuck in my situation. Firstly note in (Chrome) Console > Network > Response that the array may well come back in the correct order as part of your php JSON. Then compare this with Console > Network > Preview and the order is lost.

My desired output was for a Select box where I wanted the dropdown options in alphabetical order. Using Jquery I was actually able to achieve this here: Sorting options elements alphabetically using jQuery

I used Gerbus answer which I highly suspect could be ported to most other Jquery based situations outside of dropdown boxes.

Upvotes: 0

Felix Jr
Felix Jr

Reputation: 452

To preserve the order of PHP array, use array_values() function.

<?php $php_array = array_values($php_array); ?>
var jsonArray = JSON.parse('<?php echo json_encode($php_array); ?>');

Upvotes: 8

pumbo
pumbo

Reputation: 3826

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)
    );
}

Upvotes: 24

gen_Eric
gen_Eric

Reputation: 227280

The problem is that in JavaScript only arrays are ordered, objects are not.

If you had something like:

array(
    array(
        'type' => 2
        'id' => 6
    ),
    array(
        'type' => 4
        'id' => 12
    ),
    array(
        'type' => 3
        'id' => 19
    )
)

Then in your JavaScript you'd have an array of objects, and that array would retain its order.

The reason it's out of order is because your array's index didn't start at 0, the keys were not in order and there were gaps in the keys. So, when encoded, PHP turned it into an object instead of an array.

Upvotes: 6

Related Questions