Parse XML from Axios response, pushing to Vue data array

Question

In my Vue app, I get an XML file with Axios and use parseString to parse XML as JSON. I then need to pass the result to Vue data (this.events). My console.log shows the parsed XML as JSON, but I cannot push to Vue data inside this function.

var parseString = require('xml2js').parseString;

axios.get(`http://url.to/events.xml`)
  .then(response => {
    parseString(response.data, function (err, result) {
      console.log(result); // returns a json array
      this.events = result // nothing happens
    });        
  })
}

How do I store my JSON array to this.data in Vue?

score 7 · Answer 1 · edited Oct 09 '21 at 05:02

7

This answer is correct. However, I would just use arrow functions everywhere so the this is always the VUE class component. Also, I would check for parsing errors.

axios.get('http://url.to/events.xml')
  .then(response => {
    parseString(response.data, (err, result) => {
      if(err) {
       //Do something
      } else {
       this.events = result
     }
    });        
  })
}

edited Oct 09 '21 at 05:02

oguz ismail

1
16
47
69

answered Jan 15 '19 at 11:13

kimy82

4,069
1
22
25

score 6 · Accepted Answer · answered Feb 14 '18 at 13:21

6

Try not to use this inside parseString, maybe it's a scope issue, which means this isn't referring to the vue data object.

Try this:

axios.get('http://url.to/events.xml')
  .then(response => {
    var self = this; 
    parseString(response.data, function (err, result) {
      self.events = result
    });        
  })
}

answered Feb 14 '18 at 13:21

samayo

16,163
12
91
106

That helped, I'm able to pass the data now. Thanks! – Filip Blaauw Feb 14 '18 at 13:23
3

You could make use of an ES6 arrow function to maintain the execution context and still use this :) – Dewald Els Mar 26 '19 at 14:48

Parse XML from Axios response, pushing to Vue data array

2 Answers2

Linked