JSON 파일 읽어들여 컴포넌트 나열

JavaScript 버전

1. HTML input 태그의 type="file"로 "파일 선택" 버튼을 표시한다. 이 때 id="ID명"으로 작성하고 js와 연결을 준비한다.

<input type="file" id="loader">

2. id 태그의 값이 변경될 때, 파일을 읽어들이는 메소드(loadFile)가 호출되도록 한다.

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

3. 읽어들이는 메소드(loadFile)에서는 파일을 읽어들이면(reader.onload) JSON 파일의 내용을 JSON 데이터로 변경(JSON.parse) 하도록 작성해두고 실제로 읽어들인다.(reader.readAsText)

function loadFile(e) {
  file = e.target.files[0];
  if(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
      json = JSON.parse(e.target.result);
    }
  }
}

더 읽을거리 - mozilla FileReader method