Import data from a JSON file in Vue.js instead of manual data

Question

This is my first time using Vue.js. I made this app which uses data that I manually added in the script. Now I would like to be able to add a JSON file from which it fetches the data, but I have no idea how I could do this. Below you can find my code.

HTML:




    




    
      
        Telefoon
        Scherm 
        Batterij
      
    

            
        
          
            {{ post.title }}
            {{ post.scherm }} 
            {{ post.batterij }}

Vue.js:

var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    postList: [
      { title: 'A', scherm: '35', batterij: '15' },
      { title: 'B', scherm: '65', batterij: '25' },
      { title: 'C', scherm: '40', batterij: '35' },
      { title: 'D', scherm: '35', batterij: '75' },
      { title: 'E', scherm: '20', batterij: '45' },
    ],
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
});

EDIT: My code now looks like this, but it now only returns {{ post.title }} etc.

Head:


Test Vue JSON

HTML:


    




    
      
        Telefoon
        Scherm 
        Batterij
      
    

            
        
          
            {{ post.title }}
            {{ post.scherm }} 
            {{ post.batterij }}

Script:

import posts from "../posts.json";

  el: '#app',
  data: {
    keyword: '',
    postList: [],
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  },
  mounted(){
   axios
       .get('posts.json')
       .then(response => (this.postList = response.data))
       }
    }

JSON (posts.json):

  [
    { title: "Samsung Galaxy S9", scherm: "35", batterij: "15" },
    { title: "Huawei P10", scherm: "65", batterij: "25" },
    { title: "iPhone X", scherm: "40", batterij: "35" },
    { title: "Huawei P20 Lite", scherm: "35", batterij: "75" },
    { title: "Samsung A9", scherm: "20", batterij: "45" },
 ]

Boussadjra Brahim · Accepted Answer

Vue cli:

set that data inside a file called posts.json and import it as follows :

    import posts from "./posts.json";

and assign it to your postList in the mounted hook :

  computed:{
  .... 
  },  
  mounted(){
      this.postList=posts
        }

CDN

in your case you should use an AJAX api like axios

 computed:{
  .... 
  },  
  mounted(){
       axios
           .get('posts.json')
           .then(response => (this.postList = response.data))
           }
        }

and your should include the following scripts :

Full example

var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    postList: []
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  },
  mounted(){
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response)=> {
          this.postList=response.data;
        })
  }
});




  
  
  
  
  



  

  

    

      
        
          ID
          Title
          Body
        
      

      
        
          
            {{ post.id }}
            {{ post.title}}
            {{ post.body }}

Import data from a JSON file in Vue.js instead of manual data

Answers (2)

Related Questions