JavascriptでJSONデータをマップする方法ES6

Question

CoinmarketからJSONデータを取得したいと思います。

データは取得できますが、データはマップできません。

私のコードの下

const p = document.querySelector('p'); 
    let endpoint = "https://api.coinmarketcap.com/v1/ticker/?convert=EUR"; 
    let coinsdata = []; 
    fetch(endpoint) 
    .then(blob => blob.json() 
    .then(data => coinsdata.push(...data))); 

    console.log(coinsdata); 
    coinsdata.map(coindata => { 
     return p.innerHTML = coindata.id; 
    }); 

Answer 1

問題は、非同期のxhr呼び出しを適切に管理していないことです。コードは 'then'コードブロックの外側に書かれているので、何も見えないのです。

ソリューション：

let p = document.querySelector('p'); 
const endpoint = "https://api.coinmarketcap.com/v1/ticker/?convert=EUR"; 
fetch(endpoint) 
    .then(blob => blob.json()) 
    .then(data => { 
     data.map(obj => p.innerHTML += ("\n" + JSON.stringify(obj))); 
    }); 

これは、シーケンス内のオブジェクトを出力します。要件に応じてコードを変更することができます。これはちょうど中心的なアイデアを示すことでした。

Answer 2

問題は、データが戻っAPIからくる前であっても、すぐにリストを印刷しているです。コールバック内でHTMLを設定する必要があります。

const p = document.querySelector('p'); 
let endpoint = "https://api.coinmarketcap.com/v1/ticker/?convert=EUR"; 
fetch(endpoint) 
    .then(blob => blob.json().then(data => { 
    console.log(data); 
    coinsdata.map(data => { 
     return p.innerHTML = coindata.id; 
    }); 
    }) 
);