Тернарный оператор при выводе API данных
Сайт получает данные крипто рынка через API. Нужно сделать так, что изменение курса в % (число) в ячейке таблицы было зеленого цвета, если он положительный и красный, если отрицательный
![]() Также надо заменить на прочерк (-) данные, если они отсутствуют (равны Null). ![]() По идее тут надо через тернарный оператор, но не могу понять, куда и как его прописывать. Еще есть вопрос, почему подчеркивается красным вот такая запись. Ему не нравится, что получаемый через API параметр начинается с числа ![]() ![]() |
DVV,
код можно а не картинку, где строка 12? |
(function() { function exchangeDataShow() { fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20') .then( (responce) => { return responce.json(); }) .then( (data) => { let output = ' '; data.forEach(coin => { output += ` <tr> <td>${coin.rank}</td> <td>${coin.name}</td> <td>${coin.price_usd}</td> <td>${coin.24h_volume_usd}</td> <td>${coin.market_cap_usd}</td> <td>${coin.total_supply}</td> <td>${coin.max_supply}</td> <td>${coin.percent_change_1h}%</td> <td>${coin.percent_change_24h}%</td> <td>${coin.percent_change_7d}%</td> </tr> `; }); document.getElementById('market-data').innerHTML = output; }) .catch( (err) => { console.log(err); }); } window.onload = exchangeDataShow(); setInterval(() => { console.log('reload'); exchangeDataShow(); }, 5000); })(); |
${coin['24h_volume_usd']}
А для цвета условие меньше нуля то иначе ... |
DVV,
css сами пропишите. (function() { function exchangeDataShow() { fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20') .then( (responce) => { return responce.json(); }) .then( (data) => { let output = ' '; data.forEach(coin => { let cls = coin.percent_change_1h < 0 ? 'red' : 'green'; output += ` <tr> <td>${coin.rank}</td> <td>${coin.name}</td> <td>${coin.price_usd}</td> <td>${coin['24h_volume_usd']}</td> <td>${coin.market_cap_usd}</td> <td>${coin.total_supply}</td> <td>${coin.max_supply}</td> <td class="${cls}">${coin.percent_change_1h}%</td> <td>${coin.percent_change_24h}%</td> <td>${coin.percent_change_7d}%</td> </tr> `; }); document.getElementById('market-data').innerHTML = output; }) .catch( (err) => { console.log(err); }); } window.onload = exchangeDataShow(); setInterval(() => { console.log('reload'); exchangeDataShow(); }, 5000); })(); |
Спасибо большое. Заработало))
|
рони,
исправить надо, coin.24h_volume_usd - это ошибка. |
Супер. Вот понимаю, что надо прописать тернарный оператор, но так и не дошло, куда именно. Спасибо за помощь))
|
laimas,
добавил |
Цитата:
|
а как? и как заменить null на пробел, если данных нет
|
DVV,
${....||""} |
DVV,
нет data? тогда data && data.forEach(coin => { ... |
Цитата:
|
function exchangeDataShow() { fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20') .then( (responce) => { return responce.json(); }) .then( (data) => { let output = ' '; data && data.forEach(coin => { let rateChangeHour = coin.percent_change_1h < 0 ? 'rate-red' : 'rate-green'; let rateChangeDay = coin.percent_change_24h < 0 ? 'rate-red' : 'rate-green'; let rateChangeWeek = coin.percent_change_7d < 0 ? 'rate-red' : 'rate-green'; output += ` <tr> <td>${coin.rank}</td> <td>${coin.name}</td> <td>${coin.price_usd}</td> <td>${coin['24h_volume_usd']}</td> <td>${coin.market_cap_usd}</td> <td>${coin.total_supply}</td> <td>${coin.max_supply}</td> <td class="${rateChangeHour}">${coin.percent_change_1h}%</td> <td class="${rateChangeDay}">${coin.percent_change_24h}%</td> <td class="${rateChangeWeek}">${coin.percent_change_7d}%</td> </tr> `; }); document.getElementById('market-data').innerHTML = output; }) .catch( (err) => { console.log(err); }); } window.onload = exchangeDataShow(); setInterval(() => { console.log('reload'); exchangeDataShow(); }, 5000); null все равно выводится ![]() |
Сделал, через тернарный оператор получилось
|
А это куда прописывать?
|
laimas,
можно код? |
Цитата:
|
DVV,
<td>${coin.max_supply||""}</td> |
Цитата:
|
DVV, или так
<td>${coin.max_supply === null ? "" : coin.max_supply }</td> |
Цитата:
|
laimas,
алгоритм понятен, но я думал это как-то сократит код. |
Цитата:
Цитата:
Например, так... function show([head, ...tail], ...substitutions) { return tail.reduce((result, template, i) => ( result + (substitutions[i] == null ? "" : substitutions[i]) + template ), head) } |
Цитата:
Либо имел бы JS функции подобные array_intersect_key, можно было бы отсеять "мусор", иначе сокращения не получится. ) PS. То есть, было бы хоть что-то из этого готовое, то по такому принципу: <style> table { border-collapse: collapse; } td, th { padding: 5px; border: 1px solid #ddd; } td:nth-child(n+7) { color: #198E01; } .red { color: #B20101!important; } </style> <table> <tr> <th>Криптовалюта</th> <th>Курс</th> <th>Обоъем торогов</th> <th>Капитализация</th> <th>Оборот</th> <th>Максимум</th> <th>Курс 7ч</th> <th>Курс 24ч</th> <th>Курс 7д</th> </tr> </table> <script> fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20') .then( (responce) => { return responce.json(); }) .then( (data) => { let tbl = document.querySelector('table'), key = 'name price_usd 24h_volume_usd market_cap_usd total_supply max_supply percent_change_1h percent_change_24h percent_change_7d'.split(' '); data && data.forEach(coin => { let tr = tbl.insertRow(-1); Object.entries(coin).filter(function(v) { return key.includes(v[0]) }).forEach(v => { let td = tr.insertCell(-1); td.textContent = v[1] || ''; td.classList.toggle('red', /^percent/.test(v[0]) && v[1]<0) }) }) }) </script> Но тут не в том порядке, только лишь нужное. |
Цитата:
#market-data td[data-sign="1"] { color: #198E01; } #market-data td[data-sign="-1"] { color: #B20101; } Цитата:
Цитата:
Цитата:
<tr> <th data-key="rank">№</th> <th data-key="name">Криптовалюта</th> <th data-key="price_usd">Курс</th> Мы можем в таком случае получать массив с нужными ключами в нужном порядке! Цитата:
Цитата:
DVV, вот вам код, в котором нет null и столбики вы можете легко менять! <style> table#market-data { border-collapse: collapse; } #market-data td, #market-data th { padding: 5px; border: 1px solid #ddd; } #market-data td[data-sign="1"] { color: #198E01; } #market-data td[data-sign="-1"] { color: #B20101; } </style> <table id="market-data"> <thead> <tr> <th data-key="rank">№</th> <th data-key="name">Криптовалюта</th> <th data-key="price_usd">Курс</th> <th data-key="24h_volume_usd">Объём торгов</th> <th data-key="market_cap_usd">Капитализация</th> <th data-key="total_supply">Оборот</th> <th data-key="max_supply">Максимум</th> <th data-key="percent_change_1h">Курс 7ч</th> <th data-key="percent_change_24h">Курс 24ч</th> <th data-key="percent_change_7d">Курс 7д</th> </tr> </thead> <tbody></tbody> </table> <script> function exchangeDataShow() { fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20') .then(response => response.json()) .then(data => { const table = document.getElementById("market-data") const keys = Array.from(table.tHead.rows[0].cells, cell => cell.dataset.key) const tBody = table.tBodies[0] tBody.textContent = "" for (const datum of data) { const row = tBody.insertRow() for (const key of keys) { const cell = row.insertCell() const value = datum[key] cell.textContent = value == null ? "" : value if (/^percent/.test(key)) cell.dataset.sign = Math.sign(value) } } }) } setInterval(window.onload = exchangeDataShow, 5000) </script> ЕЩЁ DVV, слово означающее ответ от сервера по английский пишется как response, laimas, слово объём пишется именно как объём. А вы думали, я не нацист! |
Цитата:
|
:write:
value == null || (cell.textContent = value); |
Цитата:
Тем более вы можете захотеть реализовать перетаскивание столбиков, а также скрывать некоторые из них, так что это нормально данные отобразить программно! |
Цитата:
|
Malleys,
а так да, на все 100 согласен с тем о чем вы говорите. |
Часовой пояс GMT +3, время: 12:47. |