How do I work with Arrays using Angular 5 in the log console?

Question

I’m trying to implement a Multiselect Dynamic dropdown on Angular, it’s like it’s selecting state according to cities, if I select for example PE in the first dropdown list to it will return me automatically in the dropdown list the list of all the cities of Pernambuco if I happen to select SP in the first dropdown list then it will return me in the second dropdown list the list of all city of São Paulo and so on.

As I have little experience and do not know how to implement this, I am trying to make this implementation into pieces.

See the code below:

 listarTodas(): Promise<any> {
    return this.http.get(this.cidadesUrl)
      .toPromise()
      .then(response => console.log(response.json()));
  }

This is the return in json:

• I’d like to return at console browser only the attributes of code
• I would also like to return at console browser only code code 1

For me it is important to know these things because when I start to understand these principles of implementation I will be able to start implementing dropdown Multiselect

Answer 1

Use the function filter

listarTodas(): Promise<any> {
    return this.http.get(this.cidadesUrl)
      .toPromise()
      .then(response => {
          let resultado = response.json();
          console.log(resultado.filter(_ => _.codigoEstado === 1));
      });
}

See working below:

const resultado = [
  { codigo: 1, nome: "Rio Branco", codigoEstado: 1 },
  { codigo: 2, nome: "Cruzeiro do Sul", codigoEstado: 1 },
  { codigo: 3, nome: "Salvador", codigoEstado: 2 },
  { codigo: 4, nome: "Porto Seguro", codigoEstado: 2 }
];

console.log(resultado.filter(_ => _.codigoEstado === 1));