JS me desordena mi arreglo :-(

[julia2021]

Hola amiguitos, estoy armando una lista select con JS y me funciona muy bien, sin embargo me pierde el orden y me muestra la lista desordenada. Les muestro el código a ver si me pueden echar una mano

Primero construyo un arreglo llamado $_offices_and_cities que tiene la siguiente forma:

Código:

id_sucursal, id_cliente, nombre, id_ciudad, nombre_ciudad

2, 28, Los Dos Caminos, 149, Caracas
1, 28, Sede Principal, 149, Caracas
7, 9, Torre Hp, 149, Caracas
9, 28, Caripe Del Guacharo, 301, Caripe
8, 22, Casigua Del Cubo, 468, Casigua
11, 28, Ejido, 240, Ejido
5, 22, Agencia Paseo Del Lago, 487, Maracaibo
10, 28, Las Delicias, 64, Maracay

Ahora aplico mi JS

Código Javascript:

<? // INICIO: LISTAS DEPENDIENTES: CLIENTE >> SUCURSAL ///////////////////// ?>
<SCRIPT LANGUAGE="JavaScript">
var arrSucursales   = new Array();
var arrSucursalesId = new Array();
 
<? // Armamos la lista desplegable de los SUCURSALES y las ciudades
 
foreach ($_offices_and_cities as $clave => $sucursal) {
 
    echo 'arrSucursales['.$sucursal['id_sucursal'].'] = "'.$sucursal['nombre_ciudad'].': '.$sucursal['nombre'].'"';echo "\n";
    echo 'arrSucursalesId['.$sucursal['id_sucursal'].'] = '.$sucursal['id_cliente'];echo "\n";
}
?>
function selectChange(control, controlToPopulate2, ItemArray2, GroupArray2)
{
    // Armamos la lista de SUCURSALES
    var myEle2 ;
    var x2 ;
    // Empty the second drop down box of any choices
    for (var q2=controlToPopulate2.options.length;q2>=0;q2--) controlToPopulate2.options[q2]=null;
    // ADD Default Choice - in case there are no values
    myEle2 = document.createElement("option") ;
    myEle2.value = 0 ;
 
    if (control.name == "id_cliente") {
        myEle2.text = "Seleccione la oficina..." ;
    }
    controlToPopulate2.add(myEle2) ;
    // Now loop through the array of individual items
    // Any containing the same child id are added to
    // the second dropdown box
    for ( x2 = 0 ; x2 < ItemArray2.length  ; x2++ )
    {
        if ( GroupArray2[x2] == control.value )
        {
            myEle2 = document.createElement("option") ;
            myEle2.value = x2 ;
            myEle2.text = ItemArray2[x2] ;
            controlToPopulate2.add(myEle2) ;
        }
    }
}
//  End -->
</script>
 
<? // FINAL: LISTAS DEPENDIENTES: CLIENTE >> SUCURSAL ///////////////////// ?>
 

Sin embargo para el cliente 28 me muestra la lista con el siguiente orden:

Código:

- Caracas: Sede principal (1)
- Caracas: Los Dos Caminos (2)
- Caripe: Caripe del Guacharo (9)
- Maracay: Las Delicias (10)
- Elijo: Elijo (11)

Cómo puedo hacer para ordenarlo por nombre_ciudad y no por id_sucursal ???

[Pantaláimon]

Hola,

¿puedes pasar el código que devuelve el navegador una vez procesado por PHP? No tengo ni idea de PHP y me seria más facil leer el código puramente en javascript sin tener que recordar si el orden de recorrido de un array en PHP está garantizado y esas cosas.

Gracias!

[manuparquegiralda]

Podrías hacer los siguiente: pasar el array a json en PHP, asignarlo a la variable en javascript y acto seguido decodificar el json en javascript.

A mi no me gusta demasiado mezclar el javascript con el PHP de la manera que lo haces. Pero bueno, te pongo un ejemplo de lo que haría yo siguiendo tu método.

Código PHP:

  <?php
 
$office_cities_json = json_encode( $_offices_and_cities );
 
?>
 
<script>
var office_cities_json = '<?php echo $office_cities_json; ?>';
var _offices_and_cities = JSON.parse( office_cities_json );
</script>  

De este modo tendrías una array en javascript exactamente igual que lo tendrías en PHP. Es posible que puedas tener algún conflicto con las comillas simples. Échale un vistazo a la documentación si se da el caso. http://php.net/manual/es/function.json-encode.php

A partir de aquí tan solo tendrías que tratar el array en javascript.