如何使用 Vanilla Javascript 检索多个 JSON 文件

如何解决如何使用 Vanilla Javascript 检索多个 JSON 文件

嗨，我在试图弄清楚如何在我的本地文件夹中调用多个 json 文件时遇到问题，我只能读取一个...需要帮助

class App {

    getIdInHash = (slug) => {
        let hash = location.hash,hashInArray = hash.split(`#!/${slug}/`),id = hashInArray[1];

        return id;
    }

    afficherDetail = (id) => {
        console.log('AfficherDetail');

        fetch('data.json')
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {

                console.log(data);
                //On va chercher la div vide
                let elResult = document.querySelector('[data-js-result]');
                //On injecte le resultat
                elResult.innerHTML = `<p>Les cépages de la région ${data[id].region ? data[id].region : '' } sont : ${data[id].cepage}.</p>`;;
            
            })
            .catch(function(error) {
                console.log(`Il y a eu un problème avec l'opération fetch: ${error.message}`);
            });
    };
}

export const { getIdInHash,afficherDetail } = new App();

解决方法

我认为读取多个文件的最佳方法是拥有一个包含文件名的数组

var promisList = [];
var resultList = [];
var fileNameList = ['data1.json','data2.json','data3.json'];

fileNameList.forEach((fileName,index) => {
  promiseList.push(
    fetch(fileName).then(response => {
      resultList[index] = response.json();
    })
  );
});

// since all is async,we need to wait all promises to be finished
Promise
  .all(promiseList)
  .then(() => {
    // all promises finished
    // all results saved in resultList
    // put your logic here
  });