JSON 데이터를 Javascript 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; 
    }); 
    }) 
);