How to modify json data in after storing in vue data object

Question

This is my vue code :

new Vue({
    el : '#root',

    data : {
        blog : []
    },

    created() {
       this.$http.get('https://jsonplaceholder.typicode.com/posts')
           .then(function(response) {
               // console.log(response.data)
               this.blog = response.data
           })
           .catch(function (error) {
               this.error = 'Error! Could not reach the API. ' + error
         })
   }

});

My html code is :

<div id="root" class="container">
        <ul v-for="post in blog">
            <li> {{ post.id }}  </li>
            <li>{{ post.userId }} </li>
            <li>{{ post.title }} </li>
        </ul>

    </div>

Now I can show every user's name just fine, but I want to modify something like if user id is 1 then the user's name will be changed into "Smith". I tried this code:

mounted() {
        if (this.blog[0].userId == 1) {
                this.blog[0].userId = 'Smith'
          }
    }

But it shows this error :

Uncaught TypeError: Cannot read property 'userId' of undefined

If I used in method with event it works just fine! How to do this ?

After console.log(this.blog)

Also after console.log(this.blog[0].userId) I get : "1"

So your problem is not adding the name, but related with the id? Because you are getting error as the id attr is does not exist — samayo
– samayo, Commented Jan 25, 2017 at 14:10
@samayo when i tried it shows this error : Uncaught TypeError: Cannot read property 'name' of undefined But if i tried it with some event handler in method then it works fine! Exactly I want to modify data after saving it to array! — Mohib
– Mohib, Commented Jan 25, 2017 at 15:37
@samayo Would you please read the post again? I've changed and also added more info! Pardon me if I'm not understandable! Thanks — Mohib
– Mohib, Commented Jan 25, 2017 at 16:00

t_dom93 · Accepted Answer · 2020-02-21 10:53:11Z

4

Problem is that your code in mounted() method done before you push response.data in blog array. So that's why it can't read any of properties.

You can call methods after you fetch data, in then() callback to be sure that you have data in blog array and then call methods for working with a blog:

new Vue({
  el: "#vue",
  data() {
    return {
      blog: []
    };
  },
  methods: {
    changeNames() {
      if (this.blog[0].userId == 1) {
        this.blog[0].userId = "Smith";
      }
    }
  },
  created() {
    Vue.http
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(response => {
        this.blog = response.data;
        this.changeNames();
      })
      .catch((error) => {
        this.error = "Error! Could not reach the API. " + error;
      });
  }
});

Here is working example: jsFiddle

edited Feb 21, 2020 at 10:53

answered Jan 25, 2017 at 16:35

t_dom93

11.6k3 gold badges56 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

samayo Over a year ago

I have only tried vue 1.x and I spent 20 minutes trying to figureout the solution, and I was almost sure that mounted gets executed before created, which is why this was not working ... I didn't know what mounted() did, since this is new function. Anyway, good answer +1

Mohib Over a year ago

exactly thats the thing I wanted, thank u so much! :)

t_dom93 Over a year ago

You're welcome. Point is that your request is asynchronous, and you need return promise so you can work with success/fails callbacks!

samayo Over a year ago

Btw why use self = this? this used to work just fine, is that a new change also?

Collectives™ on Stack Overflow

How to modify json data in after storing in vue data object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related