How to mapping JSON Object with VueJS and AXIOS

Question

How to mapping the JSON Object with the variable? I am not sure that my coding is correct or not. I just begin study in Vuejs. Please see my coding I want to map jSON data to the 'country' variable.

  var appZone = new Vue({
	el: '#el',
	data() {
		return {
		  country:  [],
		  shoppingItems: [
			{name: 'apple', price: '10'},
			{name: 'orange', price: '12'}
		  ]
		}
	},
	mounted() {
		axios.get('/wp-json/tour-api/v1/search/11361')
		.then(function (response) {
		  console.log(response);
      this.country = response.json();
		 
		})
		.catch(function (error) {
		  console.log(error);
		});
	  }
  })

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="el">
<ul>
        <li v-for="item in country">
          {{ item.country_id }}  -  {{ item.title }}
        </li>
</ul>
</div>

Here is my JSON data

Shubham Patel · Accepted Answer · 2017-08-21 11:42:24Z

3

Change the mounted function to

mounted() {
    var self = this
    axios.get('/wp-json/tour-api/v1/search/11361')
    .then(function (response) {
      console.log(response);
      self.country = response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
  }

self is being used to maintain a reference to the original this even as the context is changing. It's a technique often used in event handlers (especially in closures).

edited Aug 21, 2017 at 11:42

answered Aug 21, 2017 at 10:20

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

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

2 Comments

xDevelopers Over a year ago

did you mean 'var self = this' ?

Shubham Patel Over a year ago

It should be response.data instead of response.json()

Collectives™ on Stack Overflow

How to mapping JSON Object with VueJS and AXIOS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related