I'm having this View.JS app where I am currently showing conversation thread from JSON. The code currently looks like this:
const app = new Vue({
el: "#app",
data: {
messages:[
{
name: "Support",
message: "Hey! Wele to support"
},
{
name: "Me",
message: "Hello there!"
},
{
name: "Support",
message: "What can I do for you?"
}
],
},
template: `
<div>
<p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
</div>
`
})
Now I want to have this data on a external JSON file (Called 'data.json' in the same directory) and have the same output. Any ideas on how I can do it??
I'm having this View.JS app where I am currently showing conversation thread from JSON. The code currently looks like this:
const app = new Vue({
el: "#app",
data: {
messages:[
{
name: "Support",
message: "Hey! Wele to support"
},
{
name: "Me",
message: "Hello there!"
},
{
name: "Support",
message: "What can I do for you?"
}
],
},
template: `
<div>
<p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
</div>
`
})
Now I want to have this data on a external JSON file (Called 'data.json' in the same directory) and have the same output. Any ideas on how I can do it??
Share Improve this question edited May 1, 2020 at 7:08 Shri asked Dec 9, 2019 at 6:16 ShriShri 7511 gold badge9 silver badges27 bronze badges3 Answers
Reset to default 6Try this
messages.json
{
messages:[
{
name: "Support",
message: "Hey! Wele to support"
},
{
name: "Me",
message: "Hello there!"
},
{
name: "Support",
message: "What can I do for you?"
}
],
}
App.vue
import messages from "./messages.json";
const app = new Vue({
el: "#app",
data: messages.messages,
template: `
<div>
<p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
</div>
`
})
For More Info codesandbox example
there are multiple solution but as i believe you are very new to Vue JS and learning Vue i will keep things simple.
Add a file data.json
{
"messages": [
{
"name": "AI",
"message": "Hello Doctor"
},
{
"name": "Shri",
"message": "Hello there!"
},
{
"name": "AI",
"message": "Hope you are well. Today’s discussion shall be on treatment options to manage ..."
}
]
}
update your Js file as
const app = new Vue({
el: "#app",
data: {
messages: []
},
methods: {
loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', './data.json', true)
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
},
init() {
let that = this
that.loadJSON(function (response) {
// Parse JSON string into object
var data = JSON.parse(response);
that.messages = data.messages
});
}
},
mounted(){
this.init()
},
template: `
<div>
<p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
</div>
`
})
loadJSON is just a basic HHTP request and load the data from json file. inside init call back you can set data to local instant
Import your json file to your file and just loop it
<script>
import json from './json/data.json'
export default{
data(){
return{
messages: json
}
}
}
</script>