Проблемы с извлечением файлов JSON на сервере в массив Javascript

Question

Я довольно новичок в использовании Javascript и особенно JSON, и я изо всех сил пытался сделать это:

На моем веб-сервере есть файл JSON, который я пытаюсь для доступа и анализа в JavaScript объект. Я пытаюсь разобрать это JSON в массив, а затем дополнительно манипулировать этим массивом на основе других пользовательских переменных.

Это пример того, как выглядит JSON:

{"log":
[{
"name":"Al",
"entries":[8,12,16,19]},
{"name":"Steve",
"entries":[11,17,22]}]}

Что мне нужно сделать, так это получить массив для одной из записей и сохранить его в массиве как JavaScript объект. Я попытался сделать следующее:

var entriesLogged;

fetch ('url to the json file').then(function(response){
  return response.json();
}).then(function(data){
  entriesLogged = data.log[0].entries;
});

Однако я не могу заставить это работать и присвоить значение переменной способом, который сохраняется за пределами этой области. Мне удалось вывести значение массива с помощью console.log, но я не смог на самом деле работать с этими данными и манипулировать ими, как объект. В идеале я хотел бы проанализировать файл JSON с сервера в глобальном массиве.

Большинство учебных пособий, с которыми я сталкивался до сих пор, использовали файл JSON для вывода журналов консоли или изменения содержимое элементов html, однако мне нужно сначала извлечь значения из JSON в глобальный массив.

Я что-то здесь упустил? У кого-нибудь есть советы, как это сделать?

С наилучшими пожеланиями, Дом

Answer 1

Вы пытаетесь манипулировать переменной entriesLogged после цепочки обещаний fetch? fetch является асинхронным, поэтому это означает, что любой код после цепочки fetch будет выполняться до завершения цепочки fetch.

var entriesLogged;

fetch('url to the json file').then(function(response){
  return response.json();
}).then(function(data){
  entriesLogged = data.log[0].entries;
});

// Code down here will run before the fetch chain finishes
// So if you're using entriesLogged down here, it will be null

console.log(entriesLogged); // entriesLogged is null

Возможно, вы захотите сделать что-то вроде:

.then(function(data){
  entriesLogged = data.log[0].entries;
  myFunction(entriesLogged);
});

function myFunction(myData) {
  console.log(myData); // can access entriesLogged here
}

Answer 2

Происходит то, что вызов асинхронный c, это означает, что когда вы делаете этот вызов, создается новый поток, и javascript автоматически переходит на следующую строку.

var entriesLogged;
fecth(something).then(function(data){entriesLogged = data[0]}); // this goes to another thread an takes e.g. 5 miliseconds but javascript does not wait for this to complete, it goes to the next line
console.log(entriesLogged); // this is executed before the call is finished