Zlecę kilka prostych linijek kodu JavaScript

Question

Hejka, nie mogę sobie poradzić z kilkoma rzeczami w javascripcie, a chciałbym umieścić coś na stronie, bardzo opornie mi to idzie, dlatego zwracam się o pomoc za jakąś drobną sumkę (20zł?)bo podejrzewam że dla osób które się znają to jest to kilka minut roboty aby rozwiązać moje problemy. Jeśli cena jest nieadekwatna, proszę zatem zaproponować swoją.

Robię sobię jako projekt szkolny prostą strone z informacjami o kryptowalutach, pobieram sobie ceny poprzez API z:
Link api: https://min-api.cryptocompare[...]LSK,BTG,LTC&tsyms=USD,PLN (edytowalny w zależności jakie pary walut/krypto)
dokumentacja: https://min-api.cryptocompare.com/documentation

Mój kod javascript do łączenia się z API i pobierania danych odnośnie walut:

const linkprice = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LSK,BTG,LTC&tsyms=USD,PLN";

async function prices() {

  const response = await fetch(linkprice);
  const data = await response.json();
  console.log(JSON.stringify(data));
  console.log(data.BTC.USD, data.BTC.PLN);    

document.getElementById('btcUSD').textContent = data.BTC.USD;              //w html:   <span id="btcUSD">  </span>
}

prices();

Teraz małe pytanie odnośnie tego, czy nie da się jakoś lepiej podstawić wyniku np. data.BTC.USD niż do <span id"xxx"> (jak wyżej) tak aby można było z niego wygodniej korzystać w html, przykład: jeżeli teraz chcę umieścić cenę BTC USD dwa razy, to muszę tworzyć osobny getelement i przypisać do osobnego spana, ponieważ dwa razy nie działa, no i gdy próbowałem robić tabelę, to sortowanie nie traktuje mi spana jako liczby i po prostu nie działało, próbowałem ID zamienić na classę aby chociaż nie duplikować, ale widocznie źle. Dodatkowo jeżeli chciałbym utworzyć osobną funkcję z np. kalkulatorem to już nie mogę się odwołać do danych z tej funkcji bo nie są globalne, a w funkcji muszą być, bo await bez funkcji async nie działa. Poradzę sobię bez tego, tylko pytam bo może ktoś ma proste rozwiązanie a pomoże mi to zoptymalizować kod.

Wstęp mamy za sobą i pewnie już widać że z javy nie wiem nic.
Główne zadanie które bym chciał rozwiązać:
Otóż to API oferuje również listę ostatnich newsów(50) a ja bym chciał zrobić np. tabelę ostatnich 20-stu, lub po prostu jakieś zakładki z tytułami i po rozwinięciu krótki opis i link.
link: https://min-api.cryptocompare.com/data/v2/news/?lang=EN (screen w załączniku, jeśli nie macie wtyczki do segregowania json)
Kod który mi zwraca po prostu wszystko z linku w consoli:

const link = "https://min-api.cryptocompare.com/data/v2/news/?lang=EN";

async function newsy() {

  const response = await fetch(link);
  const data = await response.json();
  console.log(data.Data);     
}

newsy();

Próbowałem to data.Data rozwijać do np. data.Data.title ale nie działało(pierwszy raz mam z tym do czynienia) a nawet jeśli to by wyświetliło wszystkie tytuły z 50 newsów.
Piszę o robieniu tabeli, bo pewnie to można zrobić w jakiś zautomatyzowany sposób, jeśli nie, a można np. pod zmienne podstawiać ostatnie newsy z osobna, ale tak że po pojawieniu się nowych newsów, się nadpisują na najnowsze pozycję, to bym sobie zamiast tabeli stworzył jakieś rozwijane panele w bootstrapie z tytułem newsa i po rozwinięciu krótki opis i link (wszystko z jsona) i tez by ładnie wyglądało.

Dziękuje za każdą pomoc, pozdrawiam!

Answer 1

Jeśli async i await Ci nie odpowiada możesz użyć .then (Poczytaj jak działają obietnice (Promise API)) ;) Możesz też zwrócić wynik z funkcji aby dane były globalnie ;) np tak:

 

 
async function getNews() {
  const link = "https://min-api.cryptocompare.com/data/v2/news/?lang=EN";
  const response = await fetch(link);
  return response.json();
}

(async function(){ // twój nowy globalny scope ;)

     const news = await getNews();
     renderNews(news );//funkcja która wyświetli dane i bedzie miała dostęp do tych danych bez ponownego wywoływania 

})()

Wstęp mamy za sobą i pewnie już widać że z javy nie wiem nic.

Nie przesadzaj. Wiele osób nie poznało jeszcze nowego ES6 w całości, a u ciebie jest bardzo dobrze używany ;)