I am completely new to Javascript, so please bear with me! I am having trouble with the structure of my code. Despite attempting various solutions involving async functions, I cannot seem to get the order right or understand where I am going wrong.
Currently, I am using a fetch request to retrieve data from an API on my local server, which works smoothly. The JSON format includes the names of cryptocurrencies paired with usernames.
Once I have styled and inserted the initial data into divs, I proceed to make another fetch request to an external API. This time, I aim to acquire more data and insert it into the previously created divs based on the data sourced from my API.
However, the issue arises when the data fetched from the external API ends up being displayed in a single div instead of distributing them individually as intended. I have tried different approaches like forEach loops, for loops, adjusting placements, and utilizing global variables, but nothing seems to resolve the problem entirely.
The specific data I am fetching is the LOGO for each CRYPTOCURRENCY. Sadly, both logos end up in the first div with the id = cryptologo rather than in their respective corresponding divs with the same id.
I would greatly appreciate any assistance. Thank you!
Here is the snippet of my code:
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);
})
}
});
});
This is a snapshot of the resulting output:
https://i.sstatic.net/8DyCP.png
As evident from the image, all logos appear in one logo div rather than in individual ones. My goal is to have each logo displayed in its corresponding div.