読者です 読者をやめる 読者になる 読者になる

File APIを使用してローカルのJSONファイルをブラウザで読み込む

ローカルのJSONファイルを読み込んでオブジェクトに展開する。

https://cosmology233.github.io/sandbox/hatena/2016/11/20/

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Practice JavaScript</title>
</head>
<body>
  <p><input id="file" type="file" accept="text/json"></p>
  
  <script src="./scripts/script.js"></script>
</body>
</html>

scripts/script.js

(function() {
  var elems = getDOMElements();
  
  elems.fileField.addEventListener("change", function(ev_) {
    var reader = new FileReader();
    
    reader.addEventListener("load", function(ev__) {
      var result = ev__.target.result;
      
      console.log(JSON.parse(result));
    });
    
    reader.readAsText(ev_.target.files[0]);
  });
  
  function getDOMElements() {
    return {
      "fileField": document.getElementById("file")
    };
  }
})();

最近 getDOMElements の書き方にハマっている。