Vue.js Dynamic JSON Data File Generator With Live Preview From Form Field Values and Download as JSON Blob File in Browser Using Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be generating dynamic json with live preview file inside the browser using vue.js and downloads it as json file in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<main id="generator">
<h1>JSON GENERATOR</h1>
  
<div class="code" style="background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #f8f8f2">{</span>
    <span style="color: #f92672">"name"</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">"{{name}}"</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">"sex"</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">"{{sex}}"</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">"age"</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">"{{age}}"</span>
<span style="color: #f8f8f2">}</span>
</pre></div>

<h2>NAME</h2>
<input v-model="name">

<h2>SEX</h2>
<input v-model="sex">

<h2>Age</h2>
<input v-model="age">
  
  
<p class="btn"><span id="download"></span></p>
</main>

 

 

Now make a style.css file and copy paste the following code

 

style.css

 

* {
     margin: 0;
     padding: 0;
}
 main {
     margin: 0 20px;
}
 h1 {
     margin: 20px;
}
 h2 {
     margin-bottom: 0px;
     font-size: 20px;
}
 .code {
     margin-bottom: 20px;
}
 input, textarea {
     width: 100%;
     margin-bottom: 20px;
     padding: 10px;
     border-radius: 2px;
     border: 1px solid #ddd;
     display: block;
     box-sizing: border-box;
}
 #download a {
     text-align: center;
     display: block;
}

 

READ  Vue.js IFrame Embed Component For Youtube,Dailymotion,Vimeo Videos Using v-video-embed Library in Javascript Full Project For Beginners

 

Now make a script.js file and copy paste the following below code

 

script.js

 

var test;
var createJson = new Vue({
  el: '#generator',
  data: {
    name: '安室奈美恵',
    sex: '女性',
    age: '41'
  }  
});

function jsonGenerat() {
  test = [
      {
          'name': createJson.$data.name,
          'sex': createJson.$data.sex,
          'age': createJson.$data.age
      }
  ];
}

createJson.$watch('name', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('sex', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('age', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})

function json() {
  var data = JSON.stringify(test);
  var a = document.createElement('a');
  a.textContent = 'Download JSON' //ボタンの文言を定義
  a.download = 'test.json'; //JSONの名前を定義
  a.href = window.URL.createObjectURL(new Blob([data], { type: 'text/plain' }));
  a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
  var exportLink = document.getElementById('download');  
  exportLink.appendChild(a);
}json();

 

 

Now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply