0

Hola estoy haciendo un select dinámico con angular dependiendo de la elección de una región serán los países que se muestren en el select.

adjunto mi codigo:

 coutry: any[] = [{ cca3: "0", name: "Selecciona un país" }];
 public frase: CountrySelect = { cca3: "", name: "" };

 getCoutry() {
  var region = this.defaultRegion;
  this.dataStorageService.getCountryByRegion(region)
  .subscribe(data => {
    let cioc = "";
    let nameCoutry = "";
    for (let index = 0; index < data.length; index++) {
      cioc = data[index]['cioc'];
      nameCoutry = data[index]['name']['common'];
      this.frase.name = nameCoutry;
      this.frase.cca3 = cioc;
      console.log(this.frase);
      this.coutry.push(this.frase);
    }
    /* console.log(this.coutry); */

  });
 }

cuando hago el console.log de this.frase imprime bien todos los países y su código introducir la descripción de la imagen aquí , pero de alguna forma cuando hago el push al array y lo imprimo o lo veo en la aplicación imprime los n países de esa región pero todos con el mismo nombre y código del ultimo elemento de data

introducir la descripción de la imagen aquí

¿Como puedo hacer para solucionar esto y poder agregar al array los países de manera correcta?

espero puedan ayudarme

1 respuesta 1

1

El problema ocurre porque el frase que está siendo agregado al array country siempre contiene la misma referencia (posición en memoria) aunque cambie el valor de sus propiedades (cca3 y name).

Dejo algunas posibles soluciones en JavaScript (sin Angular) que vienen el caso.

Solución #1: Moviendo la declaración

Podrías mover la siguiente definición:

 public frase: CountrySelect = { cca3: "", name: "" };

Adentro del método subscribe.

 let country = [{
   cca3: "0",
   name: "Selecciona un país"
 }];

//Esta linea genera el problema
//let frase = { cca3: "", name: "" };
 
 const data = [{
     cca3: "VAN",
     name: "Vanuatu"
   },
   {
     cca3: "NRU",
     name: "Nauru"
   },
   {
     cca3: "GUM",
     name: "Guam"
   }
 ];

 function getCountry() {
   // Simulando el método subscribe
   data.forEach(d => {
     // La declaración debería ir en este lugar
     let frase = { cca3: "", name: "" };
     frase.cca3 = d.cca3;
     frase.name = d.name;
     country.push(frase);
   });
   console.log(country);
 }

 getCountry();

Solución #2: Usando el operador spread

De esta forma lo que hacemos es crear una nueva copia del objeto frase a incluir en country. En este caso es indistinto donde esté definida la variable frase.

/* Con el mismo código que el bloque anterior, pero en el método getCountry 
cambiamos el country.push(frase) por country.push({...frase}) */
function getCountry() {
   data.forEach(d => {
     frase.cca3 = d.cca3;
     frase.name = d.name;
     country.push({...frase});
   });
   console.log(country);
 }

Más info: https://es.javascript.info/object-copy

2
  • buenas noches facundo, seguí la solución dos y me funciono de maravilla, una pregunta extra habra alguna forma de ordenar el array de forma alfabetica? el 29 sep. 2022 a las 2:40
  • Perfecto! Si, abajo del método subscribe podrías agregar country.sort((a, b) => a.cca3.localeCompare(b.cca3)) , esta línea ordenaría el array de country por el campo cca3. Hay que tener en cuenta que esto también está teniendo en cuenta el primer objeto ([{ cca3: "0", name: "Selecciona un país" }]). Usando cca3 no deberías tener problema (porque cca3 es 0 en ese caso), pero si usas name no va a quedar bien. el 29 sep. 2022 a las 3:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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