Ordering of Dropdown Angular4

Asked

Viewed 340 times

-1

Hello, I have a state field (UF) that is as dropdown and would like to sort it (by name). Could you please give me a north? My code is like this today:

  estados = [
{label: 'Acre', value: 'AC'}, {label: 'Amazonas', value: 'AM'}, {label: 'Amapa', value: 'AP'},
{label: 'Pará', value: 'PA'}, {label: 'Roraima', value: 'RR'}, {label: 'Rondonia', value: 'RO'},
{label: 'Tocantins', value: 'TO'}, {label: 'Rio Grande do Sul', value: 'RS'}, {label: 'Santa Catarina', value: 'SC'},
{label: 'Paraná', value: 'PR'}, {label: 'São Paulo', value: 'SP'}, {label: 'Rio de Janeiro', value: 'RJ'},
{label: 'Minas Gerais', value: 'MG'}, {label: 'Espirito Santo', value: 'ES'}, {label: 'Goiás', value: 'GO'},
{label: 'Mato Grosso do Sul', value: 'MS'}, {label: 'Mato Grosso', value: 'MT'}, {label: 'Distrito Federal', value: 'DF'},
{label: 'Bahia', value: 'BA'}, {label: 'Sergipe', value: 'SE'}, {label: 'Alagoas', value: 'AL'},
{label: 'Paraíba', value: 'PB'}, {label: 'Piauí', value: 'PI'}, {label: 'Pernambuco', value: 'PE'},
{label: 'Rio Grande do Norte', value: 'RN'}, {label: 'Maranhão', value: 'MA'}, {label: 'Ceará', value: 'CE'}];

And in HTML it’s like this:

<p-dropdown [options]="estados" [autoWidth]="false" placeholder="UF"></p-dropdown>

Again, could you please take a north? Thank you!

angular dropdown sortable

  • As in order by name??

  • Do you see that in the array the names (label) are all out of order? I would sort by name. If it were via select, I would order by field. That’s exactly what I wanted to do in this array.

  • You want to order the label Is this alphabetical order? Like Acre, Alagoas, Amapa, Amazonas, etc...

  • Exactly, @Le

  • But the data is static, inside a variable?

  • Yes, the data is static as shown above. They are within this array 'states'.

  • Because you don’t order them right there in alphabetical order?

  • In this case it would work because there are no more states, but, if they were names of people, for example, I would have to go out looking for where to order it?

  • I don’t understand, the options would not be fixed, would receive new values?

  • Yes, the options are fixed. And I want to order it, is it possible? You can help?

  • There is something like: Array := [here all the contents of the array] Array := Array.Sort() ?

Show 6 more comments

1 answer

0


I confess that I did not understand your question, being the data you want to order in fixed alphabetic order, I did not understand the pq does not order them in variable states even, however, follows an implementation: 

let estados = [
{label: 'Acre', value: 'AC'}, {label: 'Amazonas', value: 'AM'}, {label: 'Amapa', value: 'AP'},
{label: 'Pará', value: 'PA'}, {label: 'Roraima', value: 'RR'}, {label: 'Rondonia', value: 'RO'},
{label: 'Tocantins', value: 'TO'}, {label: 'Rio Grande do Sul', value: 'RS'}, {label: 'Santa Catarina', value: 'SC'},
{label: 'Paraná', value: 'PR'}, {label: 'São Paulo', value: 'SP'}, {label: 'Rio de Janeiro', value: 'RJ'},
{label: 'Minas Gerais', value: 'MG'}, {label: 'Espirito Santo', value: 'ES'}, {label: 'Goiás', value: 'GO'},
{label: 'Mato Grosso do Sul', value: 'MS'}, {label: 'Mato Grosso', value: 'MT'}, {label: 'Distrito Federal', value: 'DF'},
{label: 'Bahia', value: 'BA'}, {label: 'Sergipe', value: 'SE'}, {label: 'Alagoas', value: 'AL'},
{label: 'Paraíba', value: 'PB'}, {label: 'Piauí', value: 'PI'}, {label: 'Pernambuco', value: 'PE'},
{label: 'Rio Grande do Norte', value: 'RN'}, {label: 'Maranhão', value: 'MA'}, {label: 'Ceará', value: 'CE'}];
 
function comparar(a,b) {
  if(a.label < b.label) {
     return -1;
  }
  else if(a.label > b.label) {
    return 1;
  }
}

console.log(estados.sort(comparar));

  • Leandrade, thanks for the return. It can be in the same variable, no problem. I understood how you put the feedback here, I just didn’t understand the syntax to make it work.

  • It’s a Javascript method called Sort(), that one of its parameters can receive a function, and that in this case is pitch(). The function compare simply check if a parameter, in this case the first letter of each label is larger or smaller than the second parameter and so on, ordering the elements within the array. You can read more about the method here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

  • But, I can put this good related to Angular? (It is not the Angularjs is the 2/4). Sorry if I’m asking bullshit, I’m starting to poke around in this now.

  • 1

    Everything that works in javascript works in the typescript that angular uses.

  • Yes normal, you can assign like this for example states = states.Sort(compare); and in the Html use the same way you’re using Angular. Only states now will no longer be the variable that was cluttered, but rather the new ordered array.

  • It worked here, Leandrade. Thanks for the help.

  • Victor doesn’t know how his level of development is there, but, I advise to give a larger study in Javascript that is base and then go to some framework as Angular. If the answer fit you can mark it as accepted in the V button below the arrows on the left side of my answer.

Show 2 more comments

Browser other questions tagged angular dropdown sortable

You are not signed in. Login or sign up in order to post.