Why JS object always sorts itself by key?

Question

I get msg_data from MySQL query with ORDER BY msg_time clause. I use then use foreach loop to create JS object of objects like this:

<script type="text/javascript">
    var active_swaps = {
    <?php if (is_array($msg_data) || $msg_data instanceof Traversable):?>
        <?php foreach($msg_data as $msg_item):?>
            <?php echo $msg_item['id'];?> : <?php echo json_encode($msg_item);?>,
        <?php endforeach;?>
    <?php endif;?>
    };
</script>

if I check $msg_data with var_dump I get:

array (size=3)
  0 => 
    array (size=20)
      'id' => string '5' (length=1)
      'user1_id' => string '1' (length=1)
      'user2_id' => string '2' (length=1)
      'hasto' => string '2' (length=1)
      'requested' => string '2017-01-20 14:28:00' (length=19)
      'accepted' => null
      'swapped1' => null
      'swapped2' => null
      'rejected' => null
      'rejected_by' => null
      'swap_seen' => null
      'msg_id' => string '23' (length=2)
      'sender_id' => string '1' (length=1)
      'msg' => string 'awdwadwd' (length=8)
      'msg_time' => string '2017-01-20 15:58:06' (length=19)
      'swap_id' => string '5' (length=1)
      'seen' => null
      'user1username' => string 'user1' (length=5)
      'user2username' => string 'user2' (length=5)
      'online' => string 'false' (length=5)
  1 => 
    array (size=20)
      'id' => string '7' (length=1)
      'user1_id' => string '1' (length=1)
      'user2_id' => string '2' (length=1)
      'hasto' => string '2' (length=1)
      'requested' => string '2017-01-20 15:57:51' (length=19)
      'accepted' => null
      'swapped1' => null
      'swapped2' => null
      'rejected' => null
      'rejected_by' => null
      'swap_seen' => null
      'msg_id' => string '22' (length=2)
      'sender_id' => string '1' (length=1)
      'msg' => string 'awdawd' (length=6)
      'msg_time' => string '2017-01-20 15:58:00' (length=19)
      'swap_id' => string '7' (length=1)
      'seen' => null
      'user1username' => string 'user1' (length=5)
      'user2username' => string 'user2' (length=5)
      'online' => string 'false' (length=5)
  2 => 
    array (size=20)
      'id' => string '6' (length=1)
      'user1_id' => string '1' (length=1)
      'user2_id' => string '2' (length=1)
      'hasto' => string '2' (length=1)
      'requested' => string '2017-01-20 15:11:58' (length=19)
      'accepted' => null
      'swapped1' => null
      'swapped2' => null
      'rejected' => null
      'rejected_by' => null
      'swap_seen' => null
      'msg_id' => string '20' (length=2)
      'sender_id' => string '1' (length=1)
      'msg' => string 'awdadwdwa' (length=9)
      'msg_time' => string '2017-01-20 15:46:44' (length=19)
      'swap_id' => string '6' (length=1)
      'seen' => null
      'user1username' => string 'user1' (length=5)
      'user2username' => string 'user2' (length=5)
      'online' => string 'false' (length=5)

However in JS console.log(active_swaps); returns this:

Object {5: Object, 6: Object, 7: Object}

No matter what I do it is always sorted by key(swap_id)! Would appreciate if someone could explain why is that happening?

Answer 1

Well, it looks like you're creating an object with $msg_item['id'] as key :

var active_swaps = {
<?php if (is_array($msg_data) || $msg_data instanceof Traversable):?>
    <?php foreach($msg_data as $msg_item):?>
        <?php echo $msg_item['id'];?> : <?php echo json_encode($msg_item);?>,
    <?php endforeach;?>
<?php endif;?>
};

is interpreted in your loop as :

var active_swaps = {
    5 : 'JSON Object',
    6 : 'JSON Object',
    7 : 'JSON Object',
};

(Nota : I replaced here the actual JSON string by 'JSON Object' for readability)

You should create an array instead of an object (which means numeric and 0-indexed keys (Thanks to @CharlotteDunois for pointing that out)), as such :

var active_swaps = [];
<?php if (is_array($msg_data) || $msg_data instanceof Traversable):?>
    <?php foreach($msg_data as $msg_item):?>
        active_swaps.push(<?php echo json_encode($msg_item);?>);
    <?php endforeach;?>
<?php endif;?>

Which would be equivalent to :

var active_swaps = [];
active_swaps.push('JSON Object');
active_swaps.push('JSON Object');
active_swaps.push('JSON Object');

Then console.log(active_swaps) should return the following :

[Object, Object, Object]

EDIT : Keeping the output as an object

You could use the key of your $msg_data as your JS Object key :

var active_swaps = {
<?php if (is_array($msg_data) || $msg_data instanceof Traversable):?>
    <?php foreach($msg_data as $key=>$msg_item):?>
        <?php echo $key;?> : <?php echo json_encode($msg_item);?>,
    <?php endforeach;?>
<?php endif;?>
};

The output of console.log(active_swaps) would now be Object {0: Object, 1: Object, 2: Object}, supposedly keeping the same order as your PHP array (ie 5, then 7, then 6)