Как выполнить данные из файла JSON через File API?

Question

Я новичок в File API. На данный момент у меня есть задача выполнить данные из json-файла, используя File API и метод drag-and-drop. Пример 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 действует как селектор файлов в этом примере. см. документацию здесь.

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: Filereader

FileReader Javascript часто смущает людей из-за его асинхронной природы. Короче говоря: в коде ниже reader.onload функция вызывается после reader.readAsText() выполнен. см документацию здесь

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>

---

Надеюсь, это поможет!