Блог

Я действительно новичок в Javascript, поэтому будьте добры! Должно быть, что-то не так с тем, как я это структурирую. Я видел возможные решения, которые могли бы включать асинхронные функции, и я пробовал их, но по какой-то причине я могу неправильно понять порядок или просто упускаю суть.

Я использую запрос на извлечение для получения некоторых данных сначала из API, который я создал на своем локальном сервере. И это прекрасно работает. Я могу получить названия криптовалют, которые я связал с именем пользователя в формате JSON.

После того, как я создал стиль для отображения divs и вставил данные, я вызываю другую выборку для другого API, на этот раз внешнего, для дальнейшего получения данных и вставки их в divs, которые я создал ранее, для каждого фрагмента данных, полученных из моего собственного API.

По какой-то причине это приводит к отображению данных, которые я получаю из этого внешнего API, в одном и том же div, вместо того, чтобы отображать их для каждого. Я пробовал функцию forEach, я пробовал (i=0;ядлина;i ), я пытался разместить его по-другому, я пытался создавать глобальные переменные и использовать их, но, похоже, ничего не работает, и вопросы, которые я ищу, не совсем выполняют свою работу.

Данные, которые я получаю, являются ЛОГОТИПОМ КРИПТОВАЛЮТЫ. ОБА ЛОГОТИПА, которые я называю, помещаются в первый созданный div с идентификатором = cryptologo, а не в каждый div с идентификатором = cryptologo, соответствующий конкретному логотипу.

Я был бы рад некоторой помощи. Спасибо.

Это мой код:

 document.addEventListener('DOMContentLoaded', function() {


fetch('/allfollowedcryptos')
  .then(response => response.json())
  .then(data => {

  // Print result
  console.log(data);
  
  for (i in data){

  var container = document.getElementById('maincont');    

  var savedcrypto = document.createElement('div');
  savedcrypto.style.height = '200px';
  savedcrypto.style.width = '1200px';
  savedcrypto.style.marginTop = '20px';

  var nameandlogo = document.createElement('div');
  nameandlogo.style.height = '200px';
  nameandlogo.style.width = '250px';
  nameandlogo.style.backgroundColor = 'red';
  nameandlogo.style.display = 'inline-block';

  var name = document.createElement('div');
  name.style.height = '60px';
  name.style.width = '250px';
  name.style.backgroundColor = 'pink';
  name.style.overflow = "hidden";
  var nm = document.createElement('h1');
  nm.innerHTML = data[i].crypto;
  

  logo = document.createElement('div');
  logo.style.height = '140px';
  logo.style.width = '250px';
  logo.style.backgroundColor = 'purple';
  logo.style.overflow = "hidden";
  logo.setAttribute('id','cryptologo');
  

  var cryptochart = document.createElement('div');
  cryptochart.style.height = '200px';
  cryptochart.style.width = '350px';
  cryptochart.style.backgroundColor = 'white';
  cryptochart.style.display = 'inline-block';
  

  var marketdetails = document.createElement('div');
  marketdetails.style.height = '200px';
  marketdetails.style.width = '600px';
  marketdetails.style.backgroundColor = 'green';
  marketdetails.style.display = 'inline-block';
  marketdetails.style.overflow = "hidden";
  
  name.appendChild(nm);
  nameandlogo.appendChild(name);
  nameandlogo.appendChild(logo);
  savedcrypto.appendChild(nameandlogo);
  savedcrypto.appendChild(cryptochart);
  savedcrypto.appendChild(marketdetails);
  container.appendChild(savedcrypto);

  

  cryptoname = data[i].crypto
  console.log(cryptoname)



     
     let url100 = `https://api.coingecko.com/api/v3/coins/${cryptoname}`;
  
     fetch(url100)
     .then(function(resp) {
     return resp.json();
     })
     .then(function(data){

        console.log(data)
        
        imgcont = document.getElementById('cryptologo');
        var img = document.createElement('img');
        img.style.marginLeft = '70px';
        img.setAttribute('src', `${data.image.small}`) ;
        imgcont.appendChild(img);
     })  

     

  }

  

  });
});
 

это изображение выходного:

как вы видите, логотипы находятся только в одном из разделов логотипа, когда я хотел бы, чтобы они были расположены рядом с каждым разделом логотипа.

Что-то подобное должно сработать, например, я использовал названия стран и соответствующий флаг, и я использовал async и await .

 const container = document.getElementsByClassName('container')[0];

// ignore this block if you are fetching name from local server
async function getCountryCode() {
    const data = await fetch('https://restcountries.eu/rest/v2/all');
    const countries = await data.json();
    return countries.map((country) => country.alpha3Code);
}

async function fetchCountryDetails() {
    const countryCodes = await getCountryCode(); // if you are fetching name from local server you can do it here ignore above block
    countryCodes.forEach(async (code) => {
        const data = await fetch(`https://restcountries.eu/rest/v2/alpha/${code}`);
        const countryDetails = await data.json();

        const countryContainer = document.createElement('div');
        countryContainer.style.marginBottom = '10px';

        const nameContainer = document.createElement('div');
        nameContainer.style.background = 'green';
        nameContainer.style.margin = 0;

        const imgContainer = document.createElement('div');
        imgContainer.style.background = 'blue';
        imgContainer.style.margin = 0;

        const name = document.createElement('h3');
        name.style.margin = 0;
        const img = document.createElement('img');

        name.innerText = countryDetails.name;
        nameContainer.appendChild(name);
        img.setAttribute('src', countryDetails.flag);
        imgContainer.appendChild(img);
        countryContainer.append(nameContainer, imgContainer);
        container.appendChild(countryContainer);
    });
}

fetchCountryDetails();