@Valen96

Как загрузить и обработать файл JSON?

Подскажите, есть вот такой json файл
[{
"id": 0,
"name": "Brent Ford",
"age": 37,
"phone": "56454545",
"phrase": "папа."
}, {
"id": 1,
"name": "Arthur Lopez",
"age": 51,
"phone": "556565",

"phrase": "кекекеa."
}}
Он лежит рядом с js файлом в одной папке, как мне его загрузить в js и там работать с ним? Вот есть код, подскажите в каком месте неправильный ход мыслей, и как получить доступ к этим данным?
const loadJSON = (callback) => {
    let xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'lulz.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = () => {
        if (xobj.readyState === 4 && xobj.status === "200") {
            // Required use of an anonymous callback
            // as .open() will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
var mydata = JSON.parse(response);
    });
}

console.log(mydata[0].name);
console.log(mydata[0].age);
console.log(mydata[1].name);
console.log(mydata[1].age);


В консоли пишет Uncaught ReferenceError: mydata is not defined
Можете написать как правильно сделать в данном случае?
  • Вопрос задан
  • 2595 просмотров
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404
Frontend Developer
У вас переменная mydata локально в колбеке определена, а вызывать вы ее пытаетесь из глобального скоупа.
Почитать:
Замыкания, область видимости
Ответ написан
BRAGA96
@BRAGA96
Все действия с ответом запроса нужно делать в callback функциии или с помощью Promise, так как XHR выполняется асинхронно.
Функция XMLHttpRequest IE8+
function ajax(params) {
  var request = new XMLHttpRequest();
  request.open(params.method, params.url, params.async || true);
  request.setRequestHeader('Content-Type', params.contentType || 'application/x-www-form-urlencoded; charset=UTF-8');
  request.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 400) {
        if (params.success) params.success(this.responseText, this.statusText, this.status);
      } else {
        if (params.error) params.error(this);
      }
    } else {
      if (params.error) params.error(this);
    }
  };
  request.send(params.data ? JSON.stringify(params.data) : '');
  request = null;
}
ajax({
  url: 'lulz.json',
  method: 'GET',
  contentType: 'application/json; charset=UTF-8',
  success: function(response, statusText, status) {
    var mydata = JSON.parse(response);
    console.log(mydata[0].name);
    console.log(mydata[0].age);
    console.log(mydata[1].name);
    console.log(mydata[1].age);
  },
  error: function(XHR) {
    console.log('Ajax Error', XHR);
  }
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы