[Vue] JSON 데이터 다루기

JSON

- JavaScript Object Notation의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환형식

- JavaScript에서 객체를 만들 때 사용하는 표기법과 매우 유사하다.

- 태그로 표현하지 않고 중괄호{}같은 형식으로 하고 값을 ,로 구분하여 나열하기에 표현이 간단하다.

 

JavaScript에서 JSON데이터 사용

- JavaScript의 FileReader메소드를 사용하면 로컬 파일을 읽어드려 사용할 수 있다.

- JSON.parse 메소드를 사용하면 JSON데이터로 변경이 가능하다.

<h2>JSON을 읽어 들이는 예제 ( JavaScript )</h2>
<input type="file" id="loader" />

<script>
    var obj1 = document.getElementById("loader");
    obj1.addEventListener("change", loadFile, false);

    function loadFile(e) {
    file = e.target.files[0];
    if (file) {
        var reader = new FileReader(); // 파일을 읽어들이면 FileReader 오브젝트를 만들어 파일을 처리한다.
        reader.onload = function (e) { //onload 이벤트로 읽어 들인 후 처리한다.	
            console.log(">>>" + e.target.result); // e.trarget.result에 읽어 들인 전체 데이터 출력
            json = JSON.parse(e.target.result); // JSON.parse 메소드로 JSON 데이터로 변경
            console.log(">>>" + json[0].title); //json데이터[0]에 있는 title 출력
            console.log(">>>" + json[0].body); 	//json데이터[0]에 있는 body 출력
        };
        reader.readAsText(file);
    }
  }
</script>

---

Vue에서 JSON파일 읽어들이기

- JavaScript에서 구현할 때와 대부분 같지만 reader.onload는 this.loadData로 쓰지 않고 this를 다른 변수에 담아서 처리해야 한다.

<h2>JSON을 읽어들이는 예제（Vue.js）</h2>
<div id="app">
    <input type="file" v-on:change="onFileChange">
    <p>읽어 들인 데이터 ＝{{ loadData }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            loadData:'',
        },
        methods: {
            onFileChange: function(e) {      
                file = e.target.files[0]
                if (file) {
                    var reader = new FileReader()
                    var vm = this; //this를 변수에 담아서 처리
                    reader.onload = function(e){
                        json = JSON.parse(e.target.result);
                        vm.loadData = json; //this.loadData로 사용하지 않는다
                    }
                    reader.readAsText(file)
                }
            }
        }
    });
</script>