javascript - 如何通过 File API 执行 json 文件中的数据？

Question

我是文件 API 新手。目前我有一个任务是使用文件 API 和拖放方法执行 json 文件中的数据。 JSON 文件示例:

[
    {
        "id":2,
        "name":"VoffCafe",
        "coordinates":{
            "latitude":56.629418,
            "longitude":47.893927
        }
    }
]

来自 JSON 文件的数据必须写入某些变量。

现在我有一个例子，它是我的任务示例，但它显示了图片，该图片被拖放到网页上。此示例中的脚本执行此操作，如下所示:

<script>
  var holder = document.getElementById('holder'),
  state = document.getElementById('status');

  if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
  } else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
  }

  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragend = function () { this.className = ''; return false; };
  holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
  reader = new FileReader();
  reader.onload = function (event) {
  console.log(event.target);
  holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
  };
</script>

完整页面示例，此脚本的工作位置如下:http://html5demos.com/file-api

如何重做这个脚本以满足我的要求？

Answer 1

您可以将“本地 JSON 文件抓取器”的任务分解为 3 个主要步骤:

1:文件选择器

在此示例中，ondrop 事件充当我们的文件选择器。 see documentation here 。

var holder = document.getElementById('holder');

   holder.ondrop = function (e) { 
   var file = e.dataTransfer.files[0]; //Gets the most recent dropped file 
   ...do FileReader stuff...
   return false; 
   }  

---

2:文件读取器

Javascript 的 Filereader 由于其异步特性经常让人们感到困惑。长话短说 : 在下面的代码中，reader.onload 函数在 reader.readAsText() 完成后调用。 see documentation here

var reader = new FileReader();
//.onload event is triggered each time the reading operation is successfully completed.
reader.onload = function (event) {
 ...do Parser stuff... 
}
reader.readAsText(file);//Passes reader the file to read as text (aka String) 

---

<强>3。解析器

一旦有了要解析的字符串，使用 JSON.parse() 将其转换为对象就非常简单了。 在此示例中，只需使用 event.target.result 传入文件内容。

reader.onload = function (event) {
    var parsedObj = JSON.parse(event.target.result); 
}

---

把它们放在一起

//JSON file (removed unnecessary brakets)  
{
    "id":2,
    "name":"VoffCafe",
    "coordinates":{
        "latitude":56.629418,
        "longitude":47.893927
    }
}

//HTML file
<script>
var holder = document.getElementById('holder'); 

/*
...Other stuff...
*/

//Step 1 : The File Selector
holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault(); // Keeps any default action the element from happening

    var file = e.dataTransfer.files[0];
    console.log(file);


    //Step 2 : The File Reader    
    var reader = new FileReader();
    reader.onload = function (event) {

        //Step : 3 The Parser 
        var parsedObj = JSON.parse(event.target.result);

        //example code : alerts all the methods of parsedObj.
        for(I in parsedObj) {
            if(parsedObj.hasOwnProperty(I)){
                alert(parsedObj[I]);
            }
        }
    };

    reader.readAsText(file);
    return false;
};
</script>

---

希望有帮助!