0

Estoy trabajando con la API de google maps para javascript. Utilizando el directions service junto con waypoints genera objetos parecidos a estos:

var ObjetoMaps1 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Colegio Parroquial San Pablo, Av. Pueyrredón 2211, C1119 ACF, Buenos Aires, Argentina",
  start_address: "Av. Patricias Argentinas, C1414 CABA, Argentina",

  steps: 2
}];

var ObjetoMaps2 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Av. Casares 3477-3499, C1425EWA CABA, Argentina",
  start_address: "Colegio Parroquial San Pablo, Av. Pueyrredón 2211, C1119 ACF, Buenos Aires, Argentina",

  steps: 3
}];

var ObjetoMaps3 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Av. Federico Lacroze 2453-2499, Buenos Aires, Argentina",
  start_address: "Av. Casares 3477-3499, C1425EWA CABA, Argentina",

  steps: 1
}];

Mi problema es que necesito ordenarlos por su atributo steps, cosa que no puedo lograr. Mi idea es ingresar a los 3 a un solo objeto, una vez logrado eso comparar cada atributo con el metodo sort, pero no funciona, muestra el steps mayor de primero, luego el menor y el que queda en medio de ultimo ¿Alguien puede ayudarme?

var objetoTotal = [];

    objetoTotal.push(ObjetoMaps3);
    objetoTotal.push(ObjetoMaps2);
    objetoTotal.push(ObjetoMaps1);

objetoTotal.sort((unObjeto, otroObjeto) => unObjeto.steps > otroObjeto.steps);
console.log("Después de ordenar: ", objetoTotal);
4
  • ya te respondieron el cómo ordenar, pero ¿Por qué querrías ordenar por steps?
    – ffflabs
    Commented el 14 ene. 2021 a las 20:38
  • Es un poco complicado de explicar, mi objetivo final es hacer una animacion en donde un marcador siga una ruta de waypoints. Por desgracia, la API solo te permite poner un maximo de 25, asi que los guardo en diferentes array (de 25 en 25) y los muestro en el mapa con un ciclo for. Los array de ejemplo que puse es el resultado de esa iteracion. Entonces, al renderizar las direcciones estan desordenadas, ahora bien, si no estan en un orden especifico no funciona la animacion. Por eso decidí ordenarlas por steps ¿Conoces alguna otra manera para ordenarlas? Commented el 14 ene. 2021 a las 21:27
  • Lo que me confunde es que la propiedad steps se presenta dentro de una instancia de DirectionsLeg en google maps api js, o bien anidada dentro de la propiedad legs si usas google directions api. En ambos casos es un array, no un entero, y la cantidad de items en el arreglo no indica su posición con respecto a otros legs
    – ffflabs
    Commented el 14 ene. 2021 a las 22:15
  • En eso tienes razon, pero en mi caso utilizo la propiedad legs para que el marcador sepa donde moverse. Asi como los ordene por steps, lo pude haber hecho con distance o duration. Solo es una solucion que pensé, en realidad aun no logro que la animacion funcione correctamente. Commented el 14 ene. 2021 a las 22:54

2 respuestas 2

2

Fernando lo primero sería concatenar cada arreglo de objectos en uno solo :

const concatMapsObjects = ObjetoMaps1.concat(ObjetoMaps2, ObjetoMaps3);

De esta manera obtendremos un solo array con todos los objetos que necesitas ordenar. (puede realizar un console.table(concatMapsObjects); para visualizar como ha quedado el nuevo arreglo).

Despues utilizaríamos la funcion sort() pero pasandole un callback personalizado (en este caso para ordenar mediante el atributo steps de cada objeto):

const sortedObjects = concatMapsObjects.sort((objectA, objectB) => objectA.steps - objectB.steps )

Ahora si realizamos un console.table(sortedObjects); veremos como quedaron ordenados de menor a mayor cada objeto según sus steps

1

El hecho de que estés tratando un array como un elemento es lo que te está generando problemas... En tu solución tienes que acceder un array dentro de otro array, por lo tanto la comparación no funciona, para hacer que tu ejemplo funcione tendrías que acceder al elemento único en tu array para poder acceder su propiedad, haciendo:

objetoTotal.push(ObjetoMaps3[0]);
objetoTotal.push(ObjetoMaps2[0]);
objetoTotal.push(ObjetoMaps1[0]);

var ObjetoMaps1 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Colegio Parroquial San Pablo, Av. Pueyrredón 2211, C1119 ACF, Buenos Aires, Argentina",
  start_address: "Av. Patricias Argentinas, C1414 CABA, Argentina",

  steps: 2
}];

var ObjetoMaps2 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Av. Casares 3477-3499, C1425EWA CABA, Argentina",
  start_address: "Colegio Parroquial San Pablo, Av. Pueyrredón 2211, C1119 ACF, Buenos Aires, Argentina",

  steps: 3
}];

var ObjetoMaps3 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Av. Federico Lacroze 2453-2499, Buenos Aires, Argentina",
  start_address: "Av. Casares 3477-3499, C1425EWA CABA, Argentina",

  steps: 1
}];

var objetoTotal = [];

objetoTotal.push(ObjetoMaps3[0]);
objetoTotal.push(ObjetoMaps2[0]);
objetoTotal.push(ObjetoMaps1[0]);

objetoTotal.sort((unObjeto, otroObjeto) => unObjeto.steps - otroObjeto.steps);
console.log("Después de ordenar: ", objetoTotal);

Te pongo un ejemplo de como hacerlo, en este caso use el spread operator (...), suponiendo que los elementos que tienes son un array de un solo elemento, por lo tanto no tiene sentido tenerlos en arrays.

Luego utilicé el sort haciendo la comparación entre las propiedades step.

var ObjetoMaps1 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Colegio Parroquial San Pablo, Av. Pueyrredón 2211, C1119 ACF, Buenos Aires, Argentina",
  start_address: "Av. Patricias Argentinas, C1414 CABA, Argentina",

  steps: 2
}];

var ObjetoMaps2 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Av. Casares 3477-3499, C1425EWA CABA, Argentina",
  start_address: "Colegio Parroquial San Pablo, Av. Pueyrredón 2211, C1119 ACF, Buenos Aires, Argentina",

  steps: 3
}];

var ObjetoMaps3 = [{
  distance: {
    text: "44,6 km",
    value: 44593
  },
  duration: {
    text: "2h 2 min",
    value: 7321
  },
  end_address: "Av. Federico Lacroze 2453-2499, Buenos Aires, Argentina",
  start_address: "Av. Casares 3477-3499, C1425EWA CABA, Argentina",

  steps: 1
}];


let misObjetos = [...ObjetoMaps1, ...ObjetoMaps2, ...ObjetoMaps3];

console.log(misObjetos);

misObjetos.sort((a, b) => a.steps - b.steps)
console.log("==================ORDENADO==================");
console.log(misObjetos);

1
  • Gracias amigo, tu explicacion me ayudo mucho. Commented el 14 ene. 2021 a las 21:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.