Vue.JS get Data From JSON
Vue.Js get Data From JSON As We know most of single page apps works with apis and we deal with json data so here in this article we are going to explain how you can get data from JSON file.
Vue.JS get Data From JSON File | Get Data From URL Example
Here we are going to create a simple example which will read data from JSON file using vue.js-
JSON File
Here is simple json file which contains the following data –
Vue.JS get Data From JSON Example:
{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Jonny","email":"jonny@yopemail.com","phone":"121334444"},{"id":"7","name":"Barak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}
|
Read Data From JSON file in Vue.js
Now let us understand how to read this json object file which contains list of users data.
Read Data List From JSON Url Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="udata in userData">
Id : {{ udata.id }} Name: {{ udata.name }}
</div>
</div>
<script>
var dataURL = 'http://tutorialsplane.com/runtest/json/getUsers.php';
var App = new Vue({
el: '#app',
data: {
userData: [] // initialize empty array
},
mounted() { // when the Vue app is booted up, this is run automatically.
var self = this // create a closure to access component in the callback below
$.getJSON(dataURL, function(data) {
self.userData = data.users;
});
}
})
</script>
</body>
</html>
|
If You run the above demo it will produce output something like this-
Advertisements
