Javascript is sorting part of the array

Question

I tried to find something about my problem but I haven't found anything yet.

I have a php array sorted as I want, but when I try to show it with javascript the order is altered, not all of it, but only the numbers. This example is reduced to simplify the problem, but I need this structure and even more arrays inside.

This is the code:

<?php
// array ordered as i need
$data = array(
    "first" => array(
        "test3" => array(),
        "test1" => array(),
        "test2" => array(),
        "30" => array(),
        "31" => array(),
        "35" => array(),
    ),
    "segond" => array(
        "test1" => array(),
        "test2" => array(),
    ),
);
?>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            var data = <?php echo json_encode($data); ?>;
            $(document).on('click', 'input[type=button][name=test]', function() {
                var fields = Object.keys(data['first']);
                for(i=0; i<fields.length; i++) {
                    $('body').append('<p>'+fields[i]+'</p>');
                }
            });
        </script>
    </head>
    <body>
        <input type="button" name="test" value="Test me">
    </body>
</html>

This is the result:

30
31
35
test3
test1
test2

Numbers are ordered but not the strings! I need to access the keys as values because they are names that I want to show. My guess is that when I get the keys they come ordered in the new array but I tried several things to maintain my order but javascript always sorts the array differently.

Can you help me? Thanks :)

JavaScript does not know “associative arrays”, only objects - but objects do not guarantee a specific order of their properties. (ES6 changes that in part.) — 04FS, Oct 21 '19 at 13:55
In ES6, *integer-like* keys will always be enumerated before other string keys in `Object.keys()` https://stackoverflow.com/a/38218582/3082296 — adiga, Oct 21 '19 at 13:56
[Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) — Andreas, Oct 21 '19 at 13:58
Possible duplicate of [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) — miken32, Oct 22 '19 at 20:26

score 0 · Accepted Answer · answered Oct 21 '19 at 13:58

0

As someone with a nice name already told you via comments, JS does not understand "associative arrays" nor has a concept of order for these keys. That's why you must use an array ordered as you want since the begining (in PHP) and then encode it for JS usage.

<?php
// array ordered as i need
$data = array(
    "first" => array(
        "test3" => array(),
        "test1" => array(),
        "test2" => array(),
        "30" => array(),
        "31" => array(),
        "35" => array(),
    ),
    "segond" => array(
        "test1" => array(),
        "test2" => array(),
    ),
);

// Use this in JSON encode
$keys_used_in_js = array_keys($data['first']);

?>

answered Oct 21 '19 at 13:58

besciualex

1,872
1
15
20

Thank you, its works, but I already tried this. The problem is the array has several dimensions with lots of keys and values. I can't create a separated array each time. I wanted to make something that can access to any dimension of the array and get the keys ordered. But is more difficult than I thought. – David Oct 21 '19 at 14:33
The sollution to achieve this is to create a recursive function in PHP which for given $data, it will return $data_keys_only array. In this array you will only have indexable arrays, therefore ordered. After this step you encode in JSON this $data_keys_only array and use it to iterate throgh steps in the order you need. – besciualex Oct 22 '19 at 14:47
An easier alternative to recursive function is that for each array, to add an extra property: 'sort_order'. Then in JS, using this key you will sort your keys in the order you needed. Use the first method if you are more confident in your PHP skills, and the second one if you know JS better. – besciualex Oct 22 '19 at 14:49

Javascript is sorting part of the array

1 Answers1