Javascript.RU

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

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

DVV, или так
<td>${coin.max_supply === null ? "" : coin.max_supply }</td>
Ответить с цитированием
  #23 (permalink)  
Старый 25.10.2019, 22:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
не понимаю
А что непонятного, зачем два имени класса, если ячейка может иметь один из двух цветов. Значит определить этим ячейкам сразу зеленый цвет - nth-child(exp), а класс определяющий красный цвет добавлять по условию.
Ответить с цитированием
  #24 (permalink)  
Старый 25.10.2019, 23:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

laimas,
алгоритм понятен, но я думал это как-то сократит код.
Ответить с цитированием
  #25 (permalink)  
Старый 26.10.2019, 01:51
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
<td>${coin.max_supply||""}</td>
Если будет 0, то вместо него будет пустая строка


Сообщение от рони
или так
<td>${coin.max_supply === null ? "" : coin.max_supply }</td>
Ну тогда уж определить как обрабатывать шаблон, чтобы нигде не проскочил ни null, ни undefined

Например, так...

function show([head, ...tail], ...substitutions) {
	return tail.reduce((result, template, i) => (
		result + 
		(substitutions[i] == null ? "" : substitutions[i]) +
		template
	), head)
}
Ответить с цитированием
  #26 (permalink)  
Старый 26.10.2019, 12:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
я думал это как-то сократит код
Можно было бы и сократить, если бы исходник имел только то, что требуется и в нужном порядке, а далее добавлять в фрагмент ячейки, с двумя условиями: для null значений и с ключами содержащих в имени "percent", для которых classList.toggle('я красный', value < 0).
Либо имел бы 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>


Но тут не в том порядке, только лишь нужное.

Последний раз редактировалось laimas, 26.10.2019 в 13:08.
Ответить с цитированием
  #27 (permalink)  
Старый 26.10.2019, 17:45
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от laimas
зачем два имени класса, если ячейка может иметь один из двух цветов.
Вы можете указать вместо цвета (числа на самом деле не имеют свойства цвета!) знак числа, что более грамотно с точки зрения математики. В стилях вы сможете тогда более интересные вещи сделать.
#market-data td[data-sign="1"] {
	color: #198E01;
}
#market-data td[data-sign="-1"] {
	color: #B20101;
}


Сообщение от laimas
Значит определить этим ячейкам сразу зеленый цвет - nth-child(exp)
Это ограничивает перестановку столбиков!

Сообщение от laimas
<tr>
    <th>Криптовалюта</th>
    <th>Курс</th>
    <th>Обоъем торогов</th>
Сообщение от laimas
key = 'name price_usd 24h_volume_usd
Вместо того, чтобы объявлять отдельно столбики и связанные с ними ключи, вы можете указать в атрибуте соответствующий ключ, что позволяет легко менять столбики местами.
<tr>
	<th data-key="rank">№</th>
	<th data-key="name">Криптовалюта</th>
	<th data-key="price_usd">Курс</th>

Мы можем в таком случае получать массив с нужными ключами в нужном порядке!

Сообщение от laimas
Можно было бы и сократить, если бы исходник имел только то, что требуется и в нужном порядке
Разве исходник нельзя обработать программно? Если у вас есть массив с нужными ключами в нужном порядке, то вы можете применить функцию map, чтобы отобразить ключи на значения соответствующие этим ключам. Меня удивило, что вы споткнулись на этом! Неужели увлечение PHP так пагубно влияет? Чтобы не мозг не закостенел от PHP, используйте хотя бы иногда Java, C#, Python, или ещё какой язык, и даже JavaScript пойдёт, ведь есть всё-таки node.js! Язык суть средство записи, в первую очередь важно изучать алгоритмы.

Сообщение от laimas
было бы хоть что-то из этого готовое
Всё что нужно, уже есть, вот проверьте...
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, слово объём пишется именно как объём. А вы думали, я не нацист!
Ответить с цитированием
  #28 (permalink)  
Старый 26.10.2019, 17:51
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Malleys
Разве исходник нельзя обработать программно?
Разве кто-то говорил иное? В том то и дело, что приходится как либо выкручиваться, а речь шла о "сократить".
Ответить с цитированием
  #29 (permalink)  
Старый 26.10.2019, 18:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105


value == null || (cell.textContent = value);
Ответить с цитированием
  #30 (permalink)  
Старый 26.10.2019, 18:00
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от laimas
В том то и дело, что приходится как либо выкручиваться
Зачем выкручиваться? Вы получаете данные и вставляете их в таблицу в соответствии с столбиками, разве сервер должен знать о столбиках в интерфейсе?

Тем более вы можете захотеть реализовать перетаскивание столбиков, а также скрывать некоторые из них, так что это нормально данные отобразить программно!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка при обработке данных функцией 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