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

Question

[Valen96]

Подскажите, есть вот такой 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
Можете написать как правильно сделать в данном случае?

Comments

[Сергей Соколов]

в браузере или в nodejs ?

[Valen96]

Сергей Соколов, обычный index.js в браузере

[Bhudh]

Естественно, not defined, Вы же её объявляете с var в другой области видимости.
К слову сказать, var в ES6 уже практически отменён, нужно использовать только let и const.

[Павел Корнилов]

Bhudh, var останется и в ES-9.

[Bhudh]

KorniloFF, в целях обратной совместимости, несомненно.
Но не использовать эту инструкцию рекомендуют уже довольно давно.

Answer 1

[Антон Спирин]

У вас переменная mydata локально в колбеке определена, а вызывать вы ее пытаетесь из глобального скоупа.
Почитать:
Замыкания, область видимости

Comments

[Valen96]

а как правильно обьявить,чтобы можно было доступ к полям получить?Свверху в глобальной области?

[Антон Спирин]

Valen96, вы должны понимать, что получить доступ сразу вы не можете, так как вызов XMLHttpRequest асинхронный и завершится через определенный промежуток времени. Пишите код в колбеке.

loadJSON(onDataLoad);

const onDataLoad = data => {
  console.log(data);
}

Я бы рекомендовал использовать Promise и async/await
axios отличная библиотека для AJAX запросов на промисах.

Answer 2

[Ihor Bratukh]

Все действия с ответом запроса нужно делать в 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);
  }
});