Skip to main content

How to call a .JSON file locally with VueJS

Sometimes we need to read our application basic settings but from an external file rather than having everything hardcoded so that some endpoints and settings can change through time even if you are in production mode, we can make a get method with Axios to get information of a given .json file locally, in my case I called it data.json which is going to be at the same level of index.html, that .json file as you want to name it can change its values as you need through time, after we compiled the project the structure would be something like this and keep in mind, inside the folder dist is where are going to be the .js files, images, and other needed files by the app.

|-index.html
|-data.json
|--dist


we must install Axios with  npm install --save axios,  I created a Vue empty project and a .json file called data.json

{
    "movies": [
        { "title": "The Boy", "watched": false },
        { "title": "Avengers: Age of Ultron", "watched": true },
        { "title": "Avengers Assemble", "watched": true },
        { "title": "Scott Pilgrim", "watched": true },
        { "title": "Tron: Legacy", "watched": true },
        { "title": "The Hunger Games: Mockingjay Part 2", "watched": false }
    ]
}

 and I just can call that local data.json file anywhere like this:
we first make the Axios import 
import axios from 'axios';
and you can get it anywhere with:
axios.get('/datas.json')
       .then((response)=> {

           console.log(response.data.movies); 
})
this the App.vue
<template>
 <div id="app">
   <img src="./assets/logo.png">
   <h1>{{ msg }}</h1>

   <ul>


   <li v-for="(movie,index) in movies" :key="index">

       <p>Title: {{movie.title}}</p>

   </li>

 </ul>


 </div>
</template>

<script>

import axios from 'axios';

export default {
 name: 'app',

 data () {
   return {
     msg: 'Welcome to Your Vue.js App',
     movies:''
    
   }
 },

 beforeCreate() {


   axios.get('/datas.json')
       .then((response)=> {
        
           this.movies = response.data.movies;
           console.log(response.data.movies); 
       })
  

 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}

h1, h2 {
 font-weight: normal;
}



li {
 display:inline;
}

a {
 color: #42b983;
}
</style>

after running npm run build you get something like this, now you just edit your file data.json reload and you'll get the chances rebuilding again.



Labels:

Comments

Post a Comment

Popular posts from this blog

How to secure SpringBoot with SSL and Tomcat or Undertow

when we are going to take our applications to production mode, we must have an SSL certificate for the FrontEnd and   BackEnd too, in this case, our backend is a  SpringBoot which is using a tomcat embedded server. Terminology TLS vs SSL TLS is the successor to SSL. It is a protocol that ensures privacy between communicating applications. Unless otherwise stated, in this document consider TLS and SSL as interchangable. Certificate (cert) The public half of a public/private key pair with some additional metadata about who issued it etc. It may be freely given to anyone. Private Key A private key can verify that its corresponding certificate/public key was used to encrypt data. It is never given out publicly. Certificate Authority (CA) A company that issues digital certificates. For SSL/TLS certificates, there are a small number of providers (e.g. Symantec/Versign/Thawte, Comodo, GoDaddy, LetsEncrypt) whose certificates are included by most browsers and Op...
2 comments
Read more

How to deploy a VueJS App using Nginx on Ubuntu

There are thousands of blogs and websites out there explaining how to do a hello world and how to start with VueJS, but in this little post, I’m just going to be explaining how to do deploy a VueJs app after you have run the command through the CLI npm run build . So when you run the command npm run build a dist folder is created and that folder’s got the essential .js files to run our app, when we want to run our app on an Nginx server by default the vue-router is not going to work well so that Nginx does not come ready to work by default with a VueJs app This is basically for a Linux Ubuntu distribution if you’ve got any other Linux distribution just pay attention where is going to be set the www/html folder and the Nginx settings so that this is useful for any Linux distribution  Install and configure nginx sudo apt install nginx Double check to make sure the nginx service is running with command service nginx status, then open your browser and enter ...
1 comment
Read more

Uploading and Deleting Files with Amazon S3 and SpringBoot

Today I am going to be sharing about how to upload and delete files at AmazonS3 with SpringBoot , Amazon Simple Storage Service (S3)  is an object storage platform which helps you to store the files in form of objects, it allows us to store and retrieve any amount of data from anywhere.  Each file is stored in Amazon S3 (as an object) and is represented using a key. we are going to be using AWS Java SDK which supports various APIs related to Amazon S3 service for working with files stored in S3 bucket. so after going to  https://start.spring.io/  and create a new SpringBoot project with the Artifact as  AmazonS3  or as you prefer, open your pom.xml and let's add this dependency. AWS Java SDK supports several  APIs related to Amazon S3 service for working with files stored in S3 bucket.  <!-- https://mvnrepository.com/artifact/com.amazonaws/aws-java-sdk --> < dependency >     < groupId >...
7 comments
Read more