math min/max sprecyzowane użycie

Question

Hejka, pobieram wartości liczbowe poprzez API i za pomocą get.elementbyid wysyłam je do tablicy w htmlu. Jeden wiersz tabeli poniżej:
 

    const response_kucoin = await fetch(hrefkucoin);   
    const kucoin = await response_kucoin.json();   

  document.getElementById("ETH_kuc").textContent = kucoin.ETH.BTC;
  document.getElementById("XMR_kuc").textContent = kucoin.XMR.BTC;
  document.getElementById("DAS_kuc").textContent = kucoin.DASH.BTC;

Czy mogę użyć Math.min oraz Math.max w taki sposób aby spośród tych trzech wartości które są pobrane i wysyłane do htmla, to dla wartości minimalnej zamieniał mi kolor na czerwony, a maksymalnej na zielony?   Np. poprzez zastąpienie  .textContent na: .setAttribute("style", "color:green;") 

Jestem amatorem jeśli chodzi o javascript, tabela trochę wartości ma i też nie chciałbym nieprawidłowo tego zapchać brzydkim kodem aby nie zamulić pobierania wartości. 

Dziękuje bardzo za pomoc. 

Answer 1

Żeby nie powielać przypisywania wartości do textContent dla różnych elementów, możesz stworzyć obiekt, gdzie kluczami będą stringi, których użyjesz jako id, a wartościami będą nazwy propertisów z obiektu kucoin. Następnie użyć metody Object.entries, aby uzyskać tablicę par klucz:wartość, którą można posortować (wtedy pierwszym elementem będzie najmniejsza liczba, a ostatnim największa), przy okazji ustawiając tekst każdemu elementowi w DOM. Na koniec zmienić kolor wybranym elementom.

Przykład:

const map = {
  ETH_kuc: kucoin.ETH.BTC,
  XMR_kuc: kucoin.XMR.BTC,
  DAS_kuc: kucoin.DASH.BTC
};

const mapEntries = Object.entries(map);

const sortedMapEntries = mapEntries.sort((a, b) => {
  document.getElementById(a[0]).textContent = a[1]; // ustaw tekst każdemu elementowi
  return a[1] > b[1] ? 1 : -1; // posortuj rosnąco tablicę wyjściową
});

document.getElementById(sortedMapEntries[0][0]).style.color = 'green'; // pokoloruj pierwszy
document.getElementById(sortedMapEntries[sortedMapEntries.length - 1][0]).style.color = 'red'; // pokoloruj ostatni

 

Comments

Dziękuje za tak szczegółową pomoc, jestem bardzo wdzięczny.