Problem with fetch a json file

Hello,
I am new to vuejs and I am trying to fetch json data from a .json file.
Then I pass the json at a variable and pass it to html as

< div v-for=“letter in letters” :key=“letter.name” >
< span>{{ letter.name }}< /span>
< div class=“tooltip”>{{ letter.alt }}< /div>
< /div>
The code below works fine (at created function)
fetch(“http://localhost/vuejs/HTML5Application/public_html/test.json”)
.then(response => response.json())
.then(data => (this.letters = data.letters));

But it does not work at IE11.
So I tried this code below (from https://github.com/github/fetch#json ) but it does not pass the variable at html,I can not read the loop with the letters variable, what is wrong?

fetch(‘http://localhost/vuejs/HTML5Application/public_html/test.json’)
.then(function(response) {
return response.json()
}).then(function(json) {
// this.mn(json.letters);
this.letters= json.letters;
console.log(‘parsed json’, this.letters)
}).catch(function(ex) {
console.log(‘parsing failed’, ex)
})

I tried also Axios,works fine at firefox and Edge but at IE11 there is an error at

.then(response => {this.letters = response.data.letters; })

I thing IE does not like the =>
How can I solve this?
[edit]
I change the code as bellow but now again the letters variable does not load at the page but I can see that at console.

  axios
     .get('http://localhost/vuejs/HTML5Application/public_html/test.json')
      .then(function (response)  {this.letters = response.data.letters;  })

.catch(function (e ) {
console.log(e)
})

I found this ,that I have to use ‘=>’ that does not work at IE,so my code does not work at IE11?

.then(res => { // access parent scope
  alert("i am hit");
  this.packages = res; // now, this will access the vue instance
})

I suggest using Babel to transpile your code into something IE11 understands rather than jumping through hoops to write code for IE11.

As you’ve observed, arrow functions do not work the same as normal functions:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

The key difference is that the this value is inherited from the surrounding scope, rather than being set by the caller.

There are various ways you can fix this, such as using .bind(this), but the easiest is to grab a separate reference to this using a different name:

const that = this;

axios.get(/**/).then(function (response) {
  that.letters = response.data.letters;
})

However, if at all possible you should investigate using Babel instead, as it will rewrite the arrow functions for you.

1 Like

ie is bad invention ! some es6 features are not supported by ie