Как при откытии страницы прочитать 2 файла JSON?

Question

Есть 2 JSON файла. В одном хранится конфигурация (там имя WiFI, пароль и т.п. и еще номер эффекта, который мы выводим на стартовой странице). Во втором JSON файле хранятся эффекты. Их там штук 40. У каждого по 2 настройки. Так вот на стартовой странице надо прочитать config.json и взять с него номер эффекта и effects.json и взять с него настройки для нужного номера эффекта. Я делал для начала для одного эффекта. Просто выводил на стартовую страницу параметры эффекта.

var request = new XMLHttpRequest();
var SetupData;
var requestURL = '/e1settings.json';
request.open('GET', requestURL);
request.responseType = 'text';
request.send();
request.onload = function() {
    const SetupDataText = request.response;
    console.log(SetupDataText);
    SetupData = JSON.parse(SetupDataText);
    console.log(SetupData);
    getTableData(SetupData);
}

Далее в функции getTableData я на страницу данные в ползунки.

А вот как мне из второго файла прочитать тут же номер самого эффекта и передать его в функцию getTableData?

Answer 1

Если можно, то я бы порекомендовал исползовать синтаксис async/await. Тогда всё что нужно сделать это подождать загрузки обоих JSON и дальше работать с ними как с обычными переменными

В примере ниже я по номеру нужного эффекта узнаю какое поле мне нужно достать из конфигурации. Пример очень упрощён, но думаю в целом идея должна быть понятна:

const configJSON_1 = {
  "Name": "AAAA",
  "Surname": "BBBB",
  "effectNumber": 1
};

const configJSON_2 = {
  "Name": "CCCC",
  "Surname": "DDDD",
  "effectNumber": 2
};

const effectsJSON = {
  "1": "Name",
  "2": "Surname"
}

const getJSON = async (name) => {
  switch(name) {
    case 'configJSON_1':
      return configJSON_1;
    case 'configJSON_2':
      return configJSON_2;
    case 'effectsJSON':
      return effectsJSON;
  }
}

const workWithFirstJSON = async () => {
  const config = await getJSON('configJSON_1');
  const effects = await getJSON('effectsJSON');
  
  console.log(config[effects[config.effectNumber]]);
}

const workWithSecondJSON = async () => {
  const config = await getJSON('configJSON_2');
  const effects = await getJSON('effectsJSON');
  
  console.log(config[effects[config.effectNumber]]);
}

workWithFirstJSON();
workWithSecondJSON();

Answer 2

Если промисный вариант недоступен (может старый JS используется) - можно реализовать вот такой вариант чтения нескольких файлов "разом".

const arr = [
    {url: '/e1settings.json', data: null},
    {url: '/config.json', data: null}
]

arr.forEach(o => test(o.url))

function test(url) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'text';
    request.send();
    request.onload = function() {
        const SetupDataText = request.response;
        console.log(SetupDataText);
        SetupData = JSON.parse(SetupDataText);
        console.log(SetupData);
        getTableData(SetupData, url);
    }
}
function getTableData(data, url) {
    const o = arr.find(o => o.url === url)
    o.data = data
    if (arr.some(o => o.data === null)) return
    // в этом месте все данные получены
}

Answer 3

Можно еще предложить вот такой промисный вариант чтения нескольких файлов "разом"...

const p = [
  test('/e1settings.json'),
  test('/config.json')
]
Promise.all(p)
then(a => {
    getTableData(a[0], a[1]);
  })
  .catch(console.log)

//
function test(url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'text';
    request.send();
    request.onerror = function() {
      reject(new Error('Проблемы с файлом ' + url))
    }
    request.onload = function() {
      const SetupDataText = request.response;
      console.log(SetupDataText);
      SetupData = JSON.parse(SetupDataText);
      console.log(SetupData);
      resolve(SetupData);
    }
  })
}

БЛОГ НА HUSL

Как при откытии страницы прочитать 2 файла JSON?

Ответы (3 шт):