Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2019, 21:46
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Тернарный оператор при выводе API данных
Сайт получает данные крипто рынка через API. Нужно сделать так, что изменение курса в % (число) в ячейке таблицы было зеленого цвета, если он положительный и красный, если отрицательный


Также надо заменить на прочерк (-) данные, если они отсутствуют (равны Null).

По идее тут надо через тернарный оператор, но не могу понять, куда и как его прописывать.
Еще есть вопрос, почему подчеркивается красным вот такая запись. Ему не нравится, что получаемый через API параметр начинается с числа

Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2019, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DVV,
код можно а не картинку, где строка 12?
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2019, 22:05
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

(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);

})();
Ответить с цитированием
  #4 (permalink)  
Старый 25.10.2019, 22:10
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

${coin['24h_volume_usd']}

А для цвета условие меньше нуля то иначе ...
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2019, 22:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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);

})();

Последний раз редактировалось рони, 25.10.2019 в 22:18.
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2019, 22:15
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Спасибо большое. Заработало))
Ответить с цитированием
  #7 (permalink)  
Старый 25.10.2019, 22:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

рони,
исправить надо, coin.24h_volume_usd - это ошибка.
Ответить с цитированием
  #8 (permalink)  
Старый 25.10.2019, 22:16
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Супер. Вот понимаю, что надо прописать тернарный оператор, но так и не дошло, куда именно. Спасибо за помощь))
Ответить с цитированием
  #9 (permalink)  
Старый 25.10.2019, 22:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

laimas,
добавил
Ответить с цитированием
  #10 (permalink)  
Старый 25.10.2019, 22:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от DVV
не дошло, куда именно
Да можно было прямо в тег и без тернарного оператора, ведь какой-то из этих цветов ячейка все равно будет иметь.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка при обработке данных функцией data() sniffysko jQuery 2 07.09.2016 10:54
Аякс, Как вытащить изменнённый URL при получении данных ? Deff AJAX и COMET 18 27.05.2016 12:19
Не получается вывод данных из RESTful api Wahtel Общие вопросы Javascript 1 16.08.2015 10:30
Тернарный оператор в цикле? 1Dmitry Элементы интерфейса 1 18.06.2013 16:54
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04