Change values of objects coming from the api?

Question

Change values of objects coming from the api?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Is it possible to change values in the frontend to api?

For example, I have an api that returns this to me:

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

Then, for example, I make a simple request of it using GET

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

How can I change these values so that they are displayed in a more "pleasant" 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

asked by anonymous 21.11.2018 / 20:55

2 answers

ion-card horizontal Calling JS loading toolbar in place it should not - SUMMERNOTE

score 1 · Answer 1

I recommend if you can, you can apply this change in your api, since 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 as follows: / p>

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

But how to do this if you can not change in the bank? Well, if we are just talking about Brazilian states, I recommend you use some internationalization solution, and use the acronyms as keys and the strings as value, this solution is limited to fixed options in your system, because it does not require changes in the database . Below I will leave an example of file .yml to make clear what I wanted to say.

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

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

score 1 · Answer 2

One way I use to change a return is by the map() function. 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";
   });
});