javascript не может перебирать массив после чтения JSON-файла

Question

Я новичок в javascript. У меня проблема с простым чтением файла json. Вот пример кода.

function readJson() { 
     $.getJSON('./resources/json/comments_type.json', function(data) { 
      $.each(data, function(index, comment) { 
       tempList.push(comment); 
      }); 
     }); 



     for(var i = 0 ; i<tempList.length;i++) 
     { 
      console.log(tempList[i].text); 
     } 

    } 

Здесь я пытался итерации массива tempList после чтения из файла JSON. Но console.log ничего не показывает. Но если я попробую console.log(tempList), он будет работать. tempList - глобальная переменная. Я вызываю функцию readJson из другой функции. Файл JSON сохранен здесь JSON file

Answer 1

readJSON функция называется асинхронно. Это означает, что он загружает JSON из url (в другой поток), когда вы уже начали содержимое console.log tempList. Убедитесь, что вы прочитали список тем после его загрузки. Обычно это делается путем обратного вызова. Или вы можете сделать этот запрос синхронным (но это неправильный подход).

function readJson() { 
    $.getJSON('./resources/json/comments_type.json', function(data) { 
     $.each(data, function(index, comment) { 
      tempList.push(comment); 
     }); 
     for(var i = 0 ; i<tempList.length;i++) 
     { 
      console.log(tempList[i].text); 
     } 
    });  
} 

Попробуйте этот путь. Вы должны получить распечатанный список. Можно также передать обратный вызов функции readJson:

function readJson(callback) { 
    $.getJSON('./resources/json/comments_type.json', function(data) { 
     $.each(data, function(index, comment) { 
      tempList.push(comment); 
     }); 
     callback(); 
    });  
} 

А потом где-то в коде:

readJson(function(){ 
    for(var i = 0 ; i<tempList.length;i++) 
     { 
      console.log(tempList[i].text); 
     } 
}); 

Answer 2

Вы, кажется, запускаете цикл for, прежде чем фактически получите какие-либо данные, поскольку $ .getJSON является асинхронным. Поэтому попробуйте переместить цикл итератора на обратный вызов $ .getJSON.

function readJson() { 
    $.getJSON('./resources/json/comments_type.json', function(data) { 
     $.each(data, function(index, comment) { 
      tempList.push(comment); 
     }); 

     //Here you should have the list 
     for(var i = 0 ; i<tempList.length;i++) 
     { 
      console.log(tempList[i].text); 
     } 
    }); 
}