Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод курса валют (https://javascript.ru/forum/misc/72548-vyvod-kursa-valyut.html)

laimas 22.02.2018 18:31

spinastr,
вы меня уже так достали своей простотой, просто слов нет. То есть по вашему то что на картинке тоже самое что и код здесь?

Вы вникаете в то, что вам пишут?

spinastr 22.02.2018 18:36

laimas,

Всё исправил, дальше что делать?

spinastr 22.02.2018 18:38

Всё осталось как было

{"date":"23.2.2018","rate":{"USD":{"value":56.7608,"dyn":2},"EUR":{"value":69.6341,"dyn":1}},"previous":null,"current":{"date":"23.2.2018"}}

laimas 22.02.2018 18:42

Вот файлы, думаю заменить ими те что на сервере не сложно будет, и разбирайтесь дальше сами.

Закомментированный код в current.php удалить.

spinastr 22.02.2018 18:49

laimas,

Спасибо, всё добавил

а тут даже дата не выводится

<script>


$.getJSON("http://h116641.s08.test-hf.su/", function(data) {

$('.previous date').html(data.current.date);
$('.current date').html(data.previous.date);

    $.each(data, function(k, o) {
        $.each(o, function(a, r) {
            $('.'+k+'.'+a).html(
                a=='date' ? r : {'USD':'$','EUR':'€'}[a] + ' ' + r.value.toFixed(2) + ' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>'
            ).attr('title', function() {
                return $(this).hasClass('title') ? data[k].date : ''
            })
        })
    })
//});
</script>


на тесте всё пусто

http://h116641.s08.test-hf.su/test.html

laimas 22.02.2018 18:52

spinastr,
все, я больше ни слова не скажу. Хрен знает чего вы делаете, а все что я дал, это рабочее.

Кроме этой хрени

$('.previous date').html(data.current.date);
$('.current date').html(data.previous.date);

которая как собаке пятая лапа, но это не мое.

spinastr 22.02.2018 18:55

Цитата:

Сообщение от laimas
Кроме этой хрени

удалил

<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <script type="text/javascript" src="http://forum.ucoz.ru/.s/src/jquery-1.7.2.js"></script>
    </head>
    <body>

<style>
.up {color: #0f0;}
.down {color: #f00;}
</style> 
 
<table>
    <tr>
        <td><span class="previous date"></span></td>
        <td><span class="current date"></span></td>
    </tr>
    <tr>
        <td><span class="previous USD title"></span></td>
        <td><span class="current USD title"></span></td>
    </tr>
    <tr>
        <td><span class="previous EUR"></span></td>
        <td><span class="current EUR"></span></td>
    </tr>
</table>

<p style="font-size: 2em;" class="previous USD title"></p>

<p style="font-size: 1.5em;" class="current EUR"></p>

<p style="font-size: 2em;" class="current USD title"></p>
 
<script>


$.getJSON("http://h116641.s08.test-hf.su/", function(data) {

    $.each(data, function(k, o) {
        $.each(o, function(a, r) {
            $('.'+k+'.'+a).html(
                a=='date' ? r : {'USD':'$','EUR':'€'}[a] + ' ' + r.value.toFixed(2) + ' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>'
            ).attr('title', function() {
                return $(this).hasClass('title') ? data[k].date : ''
            })
        })
    })
//});
</script>
    </body>
</html>


Как выводить то?

Manyasha 22.02.2018 18:59

spinastr,
если не можете увидеть ошибку в скрипте,то в консоль смотрите.
где заканчивается функция function(data) {...} ?

spinastr 22.02.2018 19:03

Manyasha,
там пусто

https://pp.userapi.com/c840336/v8403...2GoTrKlPCY.jpg

я в js понимаю 1%

Manyasha 22.02.2018 19:17

нет не пусто! Красная строка не в счет? А в правой части этой строки ссылка на строчку в коде, где эта ошибка

spinastr 22.02.2018 19:32

Manyasha,

вот и что это значит?

https://pp.userapi.com/c840336/v8403...9wLhL-PmFs.jpg

laimas 22.02.2018 19:40

spinastr,
куда поместить курсы и дату из полученного ответа определяется ключами самого объекта. А для этого имена ключей дают элементам на странице как имена классов.

<span class="previous date"></span> - это составное имя класса, и к этому элементу можно обратиться по любому из имени класса (как селектору). Если же обращаться по двум именам, то их пишут через точку - previous.date.

Полученный объект (курсы) обходят двумя циклами, в первом $.each(data, function(k, o) значением аргумента "k" будут первичные ключи объекта, то есть "current" и "previous", а аргумент "о" принимает объекты с датой и курсами валют.

Второй цикл $.each(o, function(a, r) - обходит курсы и его аргументами будут: "a" - ключи "date", "USD", "EUR", а "r" будет иметь значения этих ключей, то есть даты и курсов.

Метод $('.'+k+'.'+a) соединяя первичные ключи объекта со вторичными формирует селектор составного имени класса, и они будут равны:

.current.date
.current.USD
.current.EUR
.previous.date
.previous.USD
.previous.EUR

и jQuery по этим селекторам выбирает элементы на странице. Я и показал в примере и таблицу, и параграфы, а можно было всю страницу заклеить элементами с классами, в которые jQ и поместит данные.

.html() - метод который помещает сами данные плюс стрелки.

.attr('title', function() {
return $(this).hasClass('title') ? data[k].date : ''
}) - этот метод добавит и дату в title значение элемента, если у элемента есть имя класса title. Поэтому у <span class="previous USD title"></span> будет подсказка с датой, а у <span class="previous EUR"></span> нет.

Вот и вся работа на клиенте. Все до безобразия просто.

А ошибки если есть, так с ними надо разбираться, хрен знает что у вас там творится. А гаданием ни кто заниматься не станет.

Manyasha 22.02.2018 19:42

эта ошибка говорит о том, что у вас где-то не закрыты скобки. Проверяйте, для каждой ли открытой скобки есть закрывающая.
Если вы пользуетесь каким-либо редактором (например notepade++), они обычно подсвечивают пары скобок.

laimas 22.02.2018 19:43

Цитата:

Сообщение от spinastr
вот и что это значит?

Это значит, что я для того чтобы пример работал на странице, закомментировал две строки кода - //комментарий.

Вы у этой строки $.getJSON("http://h116641.s08.test-hf.su/", function(data) { его убрали, а из этой //}); нет, и тело функции не закрыто!

Когда же вы изучать матчасть начнете.

Nexus 22.02.2018 19:46

Это нужно поместить перед "</body>":

$(function(){
	$.getJSON('http://h116641.s08.test-hf.su/',function(data){
		$('[data-currency]').each(function(){
			var currency=this.dataset.currency.toUpperCase(),
				type=this.dataset.currencryType.toLowerCase()||'current',
				prefix=this.dataset.currencryPrifex||'';
				
			if(!data[type] || !data[type][currency])
				return;
				
			var item=data[type][currency],
				html=(prefix?prefix.trim()+' ':'')+item.value.toFixed(2)+' '+
					'<b class="'+['down','up'][item.rate-1]+'">'+
						['▼','▲'][item.rate-1]+
					'</b>';
					
			$(this).html(html);
		});
	});
});


Так можно вывести курсы:
<div data-currency="usd" 
	 data-currency-type="current"
	 data-currency-prefix="$">Тут будет курс доллара на сегодня</div>
	 
<div data-currency="usd" 
	 data-currency-type="previous"
	 data-currency-prefix="$">Тут будет курс доллара на вчера</div>
	 
<div data-currency="eur" 
	 data-currency-type="current"
	 data-currency-prefix="€">Тут будет курс евро на сегодня</div>
	 
<div data-currency="eur" 
	 data-currency-type="previous"
	 data-currency-prefix="€">Тут будет курс евро на вчера</div>
	 
Доллар вчера стоил <span data-currency="usd" data-currency-type="previous"></span> рублей, 
а евро <span data-currency="eur" data-currency-type="previous"></span>

Если я нигде не ошибся, то будет работать.

laimas 22.02.2018 19:52

Nexus,
зачем? Ему код простого автомата дали, а вы наворотили еще кучу, чтобы он вообще запутался?

И зачем такие сложности городить?

spinastr 22.02.2018 19:56

Я очень ценю всё что выше написано, это труд что бы мне объяснить.

Спасибо ВАМ, но как вы мне объясняете и я не понимаю!

Так и я объясняю, что не понимаю...

На той неделе сделали курс доллара, я немного что то запомнил, потом подумал про евро, прошло 5 дней и я уже забыл подробности js.

Вы в этой среде обитаете и шарите в этом и вам кажется что и другие с лёгкостью поймут.

У меня нету даже базового знания js

Я методом народного тыка 5 лет учил HTML и CSS- мне ни кто не помогал, а когда говорили я не понимал.

Так и тут я понял 37%

Буду сейчас подставлять снова методом народного тыка и задовать вопросы в форум.

До этого все скрипты были написано, спасибо за это и снова как неделю назад, осталось вывести из json в html и я не понимаю.

Даже если и пойму, забуду через неделю.

Почему нельзя сразу всё подсказать, можно казать 97% сделано, конечно не мной мне помогли, видите как мне тяжело даются оставшиеся 3 %?

Например я разбираюсь в сочетании цветов и легко могу что то подобрать, а другой в этом не понимает. Лучше сразу подсказать чем учить и смотреть как человек мучается.

spinastr 22.02.2018 19:58

Nexus,

поместил на тестовой странице пусто

Nexus 22.02.2018 20:06

Цитата:

Сообщение от spinastr
Nexus,

поместил на тестовой странице пусто

Я привел пример того, как можно вывести информацию на страницу...
JS-код вы вставили, отлично, но что на счет вывода информации?

Читайте то, что ниже этого:
Цитата:

Сообщение от Nexus
Так можно вывести курсы:


Nexus 22.02.2018 20:07

laimas, таки да, тут я затупил, тс не справился со столь "сложным" выводом информации...

laimas 22.02.2018 20:09

Цитата:

Сообщение от spinastr
У меня нету даже базового знания js

Его и не будет, если не заниматься этим.

Эта тема может быть занесена в книгу рекордов Гиннеса как самая толстая тема на форму программистов. И большая заслуга в этом принадлежит вам, причиной которой является банальная невнимательность, которую ни к JS ни к любому иному языку не пришить.

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

Цитата:

Сообщение от spinastr
Почему нельзя сразу всё подсказать, можно казать 97% сделано, конечно не мной мне помогли, видите как мне тяжело даются оставшиеся 3 %?

Вы перечитайте свои "пустые вопросы" - "а че не работает", "почему пусто".... и т.п., без представления картины того что именно... Тут не гадалки, по картинкам не ворожат и по "трем словам" могут в ответ и "послать...".

И большая масса постов этой темы именно в этом ключе - "что-то мычат, не понятно о чем", и при этом ждут конкретного ответа. Чего же вы ожидаете в таком случае?

И не думайте, что это я написал сжатыми в кулак руками, это действительно такая тема, пустая на 99%.

************

Начитайте изучать предмет, ибо тут не кафедра Javascript, а форум помощи тем кто сам что-то делает. Иначе как со стеной диалог получается.

laimas 22.02.2018 20:15

Цитата:

Сообщение от Nexus
тс не справился со столь "сложным" выводом информации...

Это и без кода вашего понимать можно. Зачем такое, тут уже настолько все просто, казалось бы видно, а значит понятно. Нет блин, надо еще более запугать терминами непонятными. :)

Что охота продолжение темы до 1000 постов?

Nexus 22.02.2018 20:23

laimas, мне (не)показалось, что у автора возникают какие-то сложности с присвоением классов для вывода информации, подумал, может быть ему будет проще присваивать data-атрибуты )

Цитата:

Сообщение от laimas
Что охота продолжение темы до 1000 постов?

Сервер Сбера возвращает курс для множества валют.
Если автор захочет вывести еще какие-нибудь, то не исключено, что комментариев в теме будет за тысячу.


Для вывода курсов для двух валют понадобилось уже около 500 комментариев :lol:

laimas 22.02.2018 20:24

Цитата:

Сообщение от Nexus
мне (не)показалось, что у автора возникают какие-то сложности с присвоением классов для вывода информации

То есть то, что вы написали это намного проще для него? :D

Nexus 22.02.2018 20:27

Цитата:

Сообщение от laimas
То есть то, что вы написали это намного проще для него?

Я ж уже написал, что это был fail с моей стороны)

spinastr 22.02.2018 20:41

Цитата:

Сообщение от Nexus
справился со столь "сложным" выводом информации...

Куда уж мне соваться?

Смеётесь на домной?

Смейтесь...

Я уже точно ничего не понимаю,

Если есть желание подсказать то подскажите, если нет. То верну скрипт как был, просто с выводом одного курса доллара.

Лично я лучше учусь на живом примере который готов и работает, а подставлять всё по очереди то JS это сложнее CSS И HTML,

Прошу вас подскажите что делать?

spinastr 22.02.2018 20:47

Код

<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <script type="text/javascript" src="http://forum.ucoz.ru/.s/src/jquery-1.7.2.js"></script>
    </head>
    <body>

<style>
.up {color: #0f0;}
.down {color: #f00;}
</style> 
 
<table>
    <tr>
        <td><span class="previous date"></span></td>
        <td><span class="current date"></span></td>
    </tr>
    <tr>
        <td><span class="previous USD title"></span></td>
        <td><span class="current USD title"></span></td>
    </tr>
    <tr>
        <td><span class="previous EUR"></span></td>
        <td><span class="current EUR"></span></td>
    </tr>
</table>

<p style="font-size: 2em;" class="previous USD title"></p>

<p style="font-size: 1.5em;" class="current EUR"></p>

<p style="font-size: 2em;" class="current USD title"></p>
 
<script>

$.getJSON("http://h116641.s08.test-hf.su/", function(data) {

    $.each(data, function(k, o) {
        $.each(o, function(a, r) {
            $('.'+k+'.'+a).html(
                a=='date' ? r : {'USD':'$','EUR':'€'}[a] + ' ' + r.value.toFixed(2) + ' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>'
            ).attr('title', function() {
                return $(this).hasClass('title') ? data[k].date : ''
            })
        })
    });
</script>
    </body>
</html>

spinastr 22.02.2018 20:52

Так не выводится в блок, дата

$('.previous date').html(data.current.date);


так не выводится дата

$('.previous date').html(current.date);


Как выводится дата?:write:

laimas 22.02.2018 20:56

Цитата:

Сообщение от spinastr
Я уже точно ничего не понимаю

Никто не смеется. Сделайте то, что ранее дали, оно готовое. Просто в своих реальных элементах укажите соответствующие имена классов.

Классы как селекторы выбраны потому, что позволяют вывести курсы в несколько областей страницы. ID как уникальное значение этого не позволит сделать, хотя если заменить классы на ID и так их писать

current-USD
....

то можно вывести оба курса за две даты с датами. А если применить селектор [id|=current] то и больше, но вся прелесть ID уже не в счет.

Селектор по имени класса плох тем, что будут опрошены все элементы на странице, пусть хоть тысячи, все. Но можно ограничить поиск, если поместить нужные элементы с классами в блоки с уникальными ID и указать поиск только в них.

Вот тот же самый пример, в нем для примера таблице дан id и два параграфа помешены в блок с id, только в которых и будет производится поиск нужных элементов.

И результат:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/html" />
	<title>Курс</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>

<style>
.up {color: #0f0;}
.down {color: #f00;}
</style> 
 
<table id="box_1">
    <tr>
        <td><span class="previous date"></span></td>
        <td><span class="current date"></span></td>
    </tr>
    <tr>
        <td><span class="previous USD title"></span></td>
        <td><span class="current USD title"></span></td>
    </tr>
    <tr>
        <td><span class="previous EUR"></span></td>
        <td><span class="current EUR"></span></td>
    </tr>
</table>

<p style="font-size: 1em;" class="previous USD title">А сюда уже не будет вывода курса, этот элемент имеет нужные имена классов, но находится вне элментов box_1 и box_2</p>

<div id="box_2">
    <p style="font-size: 1.5em;" class="current EUR"></p>

    <p style="font-size: 2em;" class="current USD title"></p>
</div> 
<script>
//это имитация ответа сервера
var data = {
    "current": {
        "date": "23.2.2018",
        "USD": {
            "value": 56.7608,
            "rate": 2
        },
        "EUR": {
            "value": 69.6341,
            "rate": 1
        }
    },
    "previous": {
        "date": "22.2.2018",
        "USD": {
            "value": 56.6537,
            "rate": 2
        },
        "EUR": {
            "value": 69.8087,
            "rate": 1
        }
    }
};
//закомментируем две строки кода для работы примера 
//$.getJSON("http://h116641.s08.test-hf.su", function(data) {
    $.each(data, function(k, o) {
        console.log(k, o) //это для посмотреть в консоли что это значит, затем удалить
        $.each(o, function(a, r) {
            console.log(a, r) //это для посмотреть в консоли что это значит, затем удалить
            //теперь ограничим поиск элементов по классу на странице только в пределах двух блоков с id равными box_1 и box_2
            $('#box_1, #box_2').find('.'+k+'.'+a) //найдем в указанных id элементы по составному классу
                              .html( //и поместим в них html код
                                    a=='date' //ключ объекта равен date? 
                                        ? r //да, ключ объекта равен date, значит помещаем в элементы с классами class="previous date" и class="current date" соответствующую дату, 
                                            //в какой именно какую определяет значение ключа "k" - current/previous
                                        :  //нет, значение ключа не равно date, а равно USD или EUR
                                        {'USD':'$','EUR':'€'}[a] //получаем символ валюты 
                                        + ' ' + r.value.toFixed(2) + //добавляем к нему курс
                                        ' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>' //добавляем стрелку и ее стиль
            ).attr('title', function() {
                return $(this).hasClass('title') ? data[k].date : '' //если у элемента есть имя класса title, то пишем ему в атрибут title дату курса 
            })
        })
    })
//});
</script>

</body>
</html>

laimas 22.02.2018 20:58

Цитата:

Сообщение от spinastr
$('.previous date').html(data.current.date);


так не выводится дата

$('.previous date').html(current.date);

Выкинуть эту хрень сам скрипт разместит в них данные.

spinastr 22.02.2018 21:02

Уважаемые!

До того как я сел в инвалидную коляску я работал в металлургии, полувагонами отправлял металлолом на заводы.

Что дороже

3A, 5A, или Б22?

laimas 22.02.2018 21:12

spinastr,
вы лучше читайте то что вам дают, забудьте о металлургии.

Я дал пример, его можно запустить, он работает, дан комментарий как он работает.

Обратиться к элементу class="previous date" по составному классу, это означает $(".previous.date") - имена классов соединены через точку! И я кому об этом писал здесь ранее? Кто блин в этом виноват - мы?

И нахрена такой хренью заниматься отдельно и явно прописывая $(".previous.date").html(сюда дату), если это уже заложено в программе?

Я могу только сожалеть о вашем положении, но не надо давить на жалость - вы невнимательны, не читаете и не думаете о том, что вам пишут. А если так, то над вами как нянькой можно сидеть по каждому мелочному вопросу, но толку не будет.

Пора в себе менять отношение к тому что дают.

Nexus 22.02.2018 21:18

Цитата:

Сообщение от spinastr
Что дороже

3A, 5A, или Б22?

Тут и тут можно найти цену на интересующие категории лома.

Над вами никто не смеется, но не скрою, положение действительно смешное.
Форум для программистов, почти 500 комментариев в теме и так и не решена задача на которую самое больше по времени требуется пол часа.

Manyasha 22.02.2018 21:20

laimas, рано пока к классам переходить) не работает все по той же причине, дело в скобках. Код из поста 467:
$.getJSON("http://h116641.s08.test-hf.su/", function(data) {
 
    $.each(data, function(k, o) {
        $.each(o, function(a, r) {
            $('.'+k+'.'+a).html(
                a=='date' ? r : {'USD':'$','EUR':'€'}[a] + ' ' + r.value.toFixed(2) + ' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>'
            )/*<-закрывающая скобка для html (строка №5)*/.attr('title', function() {
                return $(this).hasClass('title') ? data[k].date : ''
            }/*<-закрывающая скобка для функции в attr (строка №7)*/)/*<-закрывающая скобка для attr (строка №7)*/
        }/*<-закрывающая скобка для функции в each (строка №4)*/)/*<-закрывающая скобка для each (строка №4)*/
    }/*<-закрывающая скобка для функции в each (строка №3)*/);/*<-закрывающая скобка для each (строка №3)*/


spinastr,
Внимание, вопрос: когда придет конец несчастной
$.getJSON("http://h116641.s08.test-hf.su/", function(data) {
?
Закройте скобки и все заработает.

laimas 22.02.2018 21:26

Цитата:

Сообщение от Manyasha
laimas, рано пока к классам переходить) не работает все по той же причине, дело в скобках. Код из поста 467:

Сказано давно ему об этом было и судя по следующему посту, работает, а проблемы уже иного плана.

Так не выводится в блок, дата

$('.previous date').html(data.current.date);


Отгадайте за 5 сек в чем тут проблема? Так рано о классах или пора?

Я в этой горе теме обо всем уже рассказал, единственное что не сплясал еще.

spinastr 22.02.2018 21:27

Manyasha,

Где тут закрыть скобки?

$.getJSON("http://h116641.s08.test-hf.su/", function(data) {

$('.previous date').html(data.current.date);


    $.each(data, function(k, o) {
        $.each(o, function(a, r) {
            $('.'+k+'.'+a).html(
                a=='date' ? r : {'USD':'$','EUR':'€'}[a] + ' ' + r.value.toFixed(2) + ' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>'
            ).attr('title', function() {
                return $(this).hasClass('title') ? data[k].date : ''
            })
        })
    });

laimas 22.02.2018 21:30

Цитата:

Сообщение от spinastr
Где тут закрыть скобки?

Ни где, тут нет проблем, а ранее она была из-за //});

Опять по новому кругу размусоливать?

spinastr 22.02.2018 21:31

Стёр тот конец, получилось так:

$('.previous date');


Не выводит js дату, Может сам js неверен?

С точкой тоже не работает

$('.previous.date');

laimas 22.02.2018 21:31

Цитата:

Сообщение от spinastr
$('.previous date').html(data.current.date);

И выбросьте к чертовой матери мусор этот и с ошибкой написанный - в коде уже все есть!

Nexus 22.02.2018 21:33

Цитата:

Сообщение от spinastr
Manyasha,

Где тут закрыть скобки?

Если вы скопировали весь ваш код, то в нем не закрыт callback и сам метод getJson библиотеки jQuery.

Т.е. нужно как-то так:
$.getJSON("http://h116641.s08.test-hf.su/", function(data) {
	$.each(data, function(k, o) {
		$.each(o, function(a, r) {
			$('.' + k + '.' + a).html(a == 'date' ? r : {
				'USD': '$',
				'EUR': '€'
			}[a] + ' ' + r.value.toFixed(2) + ' <b class=' + ['', 'down', 'up'][r.rate] + '>' + ['', '▼', '▲'][r.rate] + '</b>').attr('title', function() {
				return $(this).hasClass('title') ? data[k].date : ''
			})
		})
	});
});


Часовой пояс GMT +3, время: 02:06.