Exchange object values from the api?

Asked

Viewed 184 times

0

it is possible to change values in the frontend by coming to api?

For example, I have an api that returns this:

"data":[
"nome": "sp",
"nome": "mg",
"nome": "rj"
]

Then I make a simple request using it GET

this.axios.get("http://localhost/api/exemplo/").then(response => {
    this.items = response.data;
});

Is there any way in the frontend I change these values to be displayed in a more "nice" way for the user? This without having to change anything in the bank, and displaying it in a v-for.

For example : São Paulo, Minas Gerais, Rio de Janeiro

javascript vue.js

  • How so change these values to be displayed in a more "nice" way for the user and displaying this in a v-for.??

  • If I did a v-go with that array items he’d show me off: sp, mg, rj.&#And I was wondering if there’s any way to change that. This is just an example of something close to what I want to do, that doesn’t really roll to exchange names for the bank.

  • Of course it has how, starting from his example that values are a array, you can pick up and show each value separately through the índice array, no need to do a for.

  • The return of the API you showed is not even valid JSON. Is an array? an object? if it is an array it will be an error because a literal array has no keys, and if it is an object it will also be an error because there are no duplicate keys. Adjust this so we can understand better please

2 answers

1

I recommend if possible, you apply this change to your api, as normally your front-end should only be a data consultant, if you have this information on the api side, you can try to send this data in the following way:

"data": [
   {"acornym": "sp", full_name: "São Paulo"},
   {"acornym": "mg", full_name: "Minas Gerais"}
]

But how to do that if you can’t change in the bank? Well, if we are only talking about Brazilian states, I recommend you use some internationalization solution, and use the acronyms as keys and strings as value, this solution is limited to fixed options in your system, because it does not need changes in the database. Below I’ll leave an example file .yml to clarify what I meant

sp: 'São Paulo'
mg: 'Minas Gerais'
...

If the options are dynamic, and you have no control, I recommend making an effort and creating more information in your database. Hope I helped, hugs!

  • But it’s not wrong that I have two columns on the bench for this kind of thing?

  • No, let’s imagine a table called State, we could have two attributes: acronym, and full_name, which helps us to save the information completely.

  • So it’s two columns, anyway. But thanks.

1

One way I use to change a return is by the function map(). Using your example would look like this:

this.axios.get("http://localhost/api/exemplo/").then(response => {
   this.items = response.data.map(item => {
      //alteracões que desejar no objeto item
      return item;
   });
});

You can use the same idea to filter: 

this.axios.get("http://localhost/api/exemplo/").then(response => {
   this.items = response.data.filter(item => {
      //Se o retorno for true então fará parte do novo array.
      return item.nome == "sp";
   });
});

Browser other questions tagged javascript vue.js

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