How to assign array fetched from an API to data property in Vue.js?

Question

I am trying to fetch news articles from an external source, it returns JSON object. I want to assign its articles property to a variable in my component. Somehow this error is occurring.

Uncaught (in promise) TypeError: Cannot set property 'articles' of undefined

Any suggestions on how to overcome this problem?

export default {
  name: "blog",
  data() {
    return {
      articles: [],
    };
  },
  mounted() {
    // API call
    this.fetchnews();
  },
  methods: {
    fetchnews(){
      fetch(
      "----------------------news link-------------------------"
    )
      .then(function(response) {
        return response.json();
      })
      .then(function(json_data) {
        //console.log(typeof(json_data))
        this.articles = json_data.articles
      });
    }
  }
};

Stalinko · Accepted Answer · 2020-02-12 12:57:17Z

2

As the first contributor properly noticed - the issue is this.articles inside your latest function doesn't really point to what you need. If you are limited to ES5 then stick to the first answer. However if you can use ES6 then simply get advantages of short syntax:

export default {
  name: "blog",
  data() {
    return {
      articles: [],
    };
  },
  mounted() {
    // API call
    this.fetchnews();
  },
  methods: {
    fetchnews(){
      fetch("----------------------news link-------------------------")
      .then(response => response.json())
      .then(json_data => this.articles = json_data.articles);
    }
  }
};

in this case this will properly point to the outer scope.

Also why do you need two then()? You could collapse them into one:

.then(response => this.articles = response.json().articles);

edited Feb 12, 2020 at 12:57

answered Feb 11, 2020 at 9:49

Stalinko

3,69434 silver badges38 bronze badges

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

2 Comments

Roberto D V Leonardo Over a year ago

is this even composition API? looks more like options API to me...

Stalinko Over a year ago

@RobertoDVLeonardo composition API didn't exist in Feb 2020 :))

oshell · Accepted Answer · 2020-02-11 09:48:31Z

1

using function keyword creates new scope. if you use arrow syntax like () => {} you can use parent scope and set articles via this.articles

fetchnews(){
  fetch()
  .then((response) => {
    return response.json();
  })
  .then((json_data) => {
    this.articles = json_data.articles
  });
}

answered Feb 11, 2020 at 9:48

oshell

9,1511 gold badge31 silver badges50 bronze badges

Comments

mai elrefaey · Accepted Answer · 2020-02-11 09:38:18Z

0

inthis.articles: here this refers to the function not vue instance , so you may define this outside the function like:

let This=this

and inside your function :

This.articles = json_data.articles This here refers to vue instance

answered Feb 11, 2020 at 9:38

mai elrefaey

3921 gold badge3 silver badges10 bronze badges

Comments

Palannagari Ashok Kumar Reddy · Accepted Answer · 2020-02-11 12:28:35Z

0

javascript function as global scope make sure use to assign function to variables

answered Feb 11, 2020 at 12:28

Palannagari Ashok Kumar Reddy

11 bronze badge

Collectives™ on Stack Overflow

How to assign array fetched from an API to data property in Vue.js?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related