Блог

page-application внутрь javascript без framework . Я застрял с этой проблемой обещаний, которые возвращаются неопределенными. Я просто получаю неопределенность на html-странице. У меня было много проблем с передачей переменной между двумя функциями getJsonData И. showPhotographers

1. Для этого я использовал определение переменной внутри блока if(1 ==1) и определил json = getJsonData() ее ; Таким образом, переменная хорошо определена. Если у вас есть решение этой проблемы, заранее благодарю вас, вот мой код:

 let json;
// get Json Data
const getJsonData = () => {
    return fetch('../../db/FishEyeData.json').then((response) => {
    return response
      .json()
      .then((data) => {
        json = data;
        return data;
      })
      .catch((err) => {
        console.log(err);
      });
  });
};

// get Photographers
const getPhotographers = () => {
  return new Promise((resolve, reject) => {
    getJsonData().then((data) => {
      console.log(data);
      return resolve(data.photographers);
    });
  });
};

// share scope json
if(1 == 1) {
  json = getJsonData();
}


const showPhotographers = () => {
  // get the values
  if (json !== undefined) {
    // load the images

    // function html Photographers section
    
    console.log(json);
    const html = JSON.stringify(json)
      .photographers?.map((user) => {
        const str = user.name;
        const dash = str.replace(" ", "-");
        console.log(dash);
        return `        
        <div class="user ">
            <a href="#${dash}">
            <div class="circle thumb">
                <div class="crop">
                <img src="img/${user.portrait}" alt="" />
                </div>
                <h2 class="name">${user.name}</h2>
            </div>
            </a>
            <p class="city">${user.city}</p>
            <p class="tagline">${user.tagline}</p>
            <p class="price">${user.price} €/jour</p>
            <ul class="tags">
                ${user.tags
                  .map((tag) =>
                    `
                <li>
                    <a href="#" class="${tag}">#${tag}</a>
                </li>
            `.trim()
                  )
                  .join("")}
            </ul>
        </div>
        `;
      })
      .join("");
    document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
  }
}



export {  json, getJsonData, getPhotographers, showPhotographers };

 

Файл FishEyeData.json выглядит так

 {
  "photographers":[
     {
        "name":"Mimi Keel",
        "id":243,
        "city":"London",
        "country":"UK",
        "tags":[
           "portrait",
           "events",
           "travel",
           "animals"
        ],
        "tagline":"Voir le beau dans le quotidien",
        "price":400,
        "portrait":"MimiKeel.jpg"
     }
]
 

Ты все слишком усложняешь. fetch возвращает обещание, поэтому вы можете использовать результат этого getPhotographers . В этом примере я возвращаю некоторые данные из вызова fakeAPI через две секунды и регистрирую имя фотографа.

 const data={photographers:[{name:"Mimi Keel",id:243,city:"London",country:"UK",tags:["portrait","events","travel","animals"],tagline:"Voir le beau dans le quotidien",price:400,portrait:"MimiKeel.jpg"}]};

function fakeAPI() {
  return new Promise(res => {
    setTimeout(() => res(data), 2000);
  });
}

function getJsonData() {
  return fakeAPI();
};

function getPhotographers() {
  return new Promise(res => {
    getJsonData().then(data => {
      res(data.photographers);
    });
  });
};

function showPhotographers() {
  getPhotographers()
    .then(data => {
      data.map(photographer => {
        console.log(photographer.name);
      });
    });
}

showPhotographers();