javascript - Read and display JSON data from external file in Vue.JS - Stack Overflow

admin管理员组

文章数量:1323200

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

Share Improve this question Follow edited May 1, 2020 at 7:08 Shri asked Dec 9, 2019 at 6:16 ShriShri 75111 gold badge99 silver badges2727 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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>

本文标签： javascriptRead and display JSON data from external file in VueJSStack Overflow