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??

• javascript
• html
• json
• vue.js
• vuejs2

3 Answers 3

Try 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>