Javascript is sorting part of the array

17
October 22, 2019, at 2:50 PM

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 :)

Answer 1

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']);
?>
READ ALSO
Submitting Form Data via Ajax to Google Forms on mobile devices

Submitting Form Data via Ajax to Google Forms on mobile devices

I have a form on our website submitting fine through html submit to google forms to google sheetsOn mobile devices it fails to submit the data, without any console problems

28
How to print my radio buttons and input type text in my textarea?

How to print my radio buttons and input type text in my textarea?

I have questionnaire with four radio buttons and one input type textPrint in sequence without deleting the previous one

38
Same bot on multiple page [on hold]

Same bot on multiple page [on hold]

I have created a chatbot on my website and what I want to do is, if I already had some chats with my chatbot and then I navigate to different pages on my website then chatbot should remember the chats and show all the contents in the chatbot in the navigated...

19
Get top/left coordinates of element being dragged (not pointer)

Get top/left coordinates of element being dragged (not pointer)

I have this jQuery UI draggable element:

22