最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin3浏览0评论

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 badges
Add a ment  | 

3 Answers 3

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>
发布评论

评论列表(0)

  1. 暂无评论