Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод json на сайт (https://javascript.ru/forum/misc/72088-vyvod-json-na-sajjt.html)

Nik_Dev 08.01.2018 02:10

Вывод json на сайт
 
Здравствуйте.
Прошу прощение, но в java не силен, поэтому прошу помощи.
Заранее благодарю.

Есть json на стороннем сайте - https://api.privatbank.ua/p24api/pub...ange&coursid=5

Как мне его вывести на страницу сайта?
То есть к примеру мне нужно вывести курс евро к гривне.

Вот описание параметров в json - https://api.privatbank.ua/#p24/exchange

рони 08.01.2018 02:34

getJSON получение и вывод json jquery
 
Nik_Dev,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    $.getJSON("https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5", function(data) {
        var items = [];
        $.each(data, function(key, val) {
            var html = "";
            Object.keys(val).forEach(function(key) {
                if (typeof val[key] != "object") html += key + " : " + val[key] + "<br>"
            });
            items.push('<li id="' + key + '">' + html + "</li>")
        });
        $("<ul/>", {
            "class": "my-new-list",
            html: items.join("")
        }).appendTo("#list")
    })
});
  </script>
</head>

<body>

<div id="list"></div>


</body>

</html>

Aetae 08.01.2018 02:36

Ещё можно так:
<script>function success(data){
  data = data.find(e => e.ccy == "EUR" && e.base_ccy == "UAH");
  alert(
    'Евро к гривне'
    + '\nПокупка: ' + parseFloat(data.buy)
    + '\nПродажа: ' + parseFloat(data.sale)
  );
}</script>
<script src="https://api.privatbank.ua/p24api/pubinfo?jsonp=success&exchange&coursid=5"></script>

Только jsonp я нащупал вручную, на сайте с описанием api с первого взгляда не нашёл, так что использовать с осторожностью)

Nik_Dev 08.01.2018 05:32

Благодарю вас, всё работает.

А как сделать выбор конкретной строки?
К примеру мне нужно только евро вывести.

Как на этом примере, только чтобы был не алерт, а вывод в блок.

<script>function success(data){
data = data.find(e => e.ccy == "EUR" && e.base_ccy == "UAH");
alert(
'Евро к гривне'
+ '\nПокупка: ' + parseFloat(data.buy)
+ '\nПродажа: ' + parseFloat(data.sale)
);
}</script>
<script src="https://api.privatbank.ua/p24api/pubinfo?jsonp=success&exchange&coursid=5"></script>

Цитата:

Сообщение от рони (Сообщение 474458)
Nik_Dev,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    $.getJSON("https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5", function(data) {
        var items = [];
        $.each(data, function(key, val) {
            var html = "";
            Object.keys(val).forEach(function(key) {
                if (typeof val[key] != "object") html += key + " : " + val[key] + "<br>"
            });
            items.push('<li id="' + key + '">' + html + "</li>")
        });
        $("<ul/>", {
            "class": "my-new-list",
            html: items.join("")
        }).appendTo("#list")
    })
});
  </script>
</head>

<body>

<div id="list"></div>


</body>

</html>


Nik_Dev 08.01.2018 05:36

Спасибо Вам )

Цитата:

Сообщение от Aetae (Сообщение 474459)
Ещё можно так:
<script>function success(data){
  data = data.find(e => e.ccy == "EUR" && e.base_ccy == "UAH");
  alert(
    'Евро к гривне'
    + '\nПокупка: ' + parseFloat(data.buy)
    + '\nПродажа: ' + parseFloat(data.sale)
  );
}</script>
<script src="https://api.privatbank.ua/p24api/pubinfo?jsonp=success&exchange&coursid=5"></script>

Только jsonp я нащупал вручную, на сайте с описанием api с первого взгляда не нашёл, так что использовать с осторожностью)


рони 08.01.2018 21:31

Nik_Dev,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<div id="out"></div>
<script>function success(data){
  data = data.find(e => e.ccy == "EUR" && e.base_ccy == "UAH");
  document.querySelector("#out").innerHTML = `Евро к гривне <br>Покупка:  ${data.buy}<br>Продажа: ${data.sale}`
}</script>
<script src="https://api.privatbank.ua/p24api/pubinfo?jsonp=success&exchange&coursid=5"></script>

</body>
</html>

Nik_Dev 08.01.2018 23:01

Спасибо огромное :dance:
Вы очень сильно мне помогли!
Как поставить + в репутацию, у меня почему-то кнопка неактивна?

Я прошу прощение за наглость, но возможно Вы мне сможете помочь еще раз?
Написал в этой теме - https://javascript.ru/forum/showthread.php?p=474501


Цитата:

Сообщение от рони (Сообщение 474504)
Nik_Dev,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<div id="out"></div>
<script>function success(data){
  data = data.find(e => e.ccy == "EUR" && e.base_ccy == "UAH");
  document.querySelector("#out").innerHTML = `Евро к гривне <br>Покупка:  ${data.buy}<br>Продажа: ${data.sale}`
}</script>
<script src="https://api.privatbank.ua/p24api/pubinfo?jsonp=success&exchange&coursid=5"></script>

</body>
</html>


рони 08.01.2018 23:59

Nik_Dev,
поробуйте так ...
<script>
window.addEventListener('DOMContentLoaded', function() {
var indx = localStorage.getItem('indx');
[].forEach.call(document.querySelectorAll('.drop li'), function(item,i) {
        item.addEventListener('click', function() {
         localStorage.setItem('indx',i);
        });
        if(i == indx) {
        jQuery(item).trigger('click')
        jQuery('.slct').text(item.textContent)
        }
    });
    });
  </script>

Nik_Dev 09.01.2018 01:17

Вложений: 1
Просто идеально, всё работает как нужно.
Вы просто гуру в своем деле )
Скажите как Вас отблагодарить можно? После праздников сделал бы небольшое пожертвование за помощь.


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

Возможно конфликт с другим скриптом, я не знаю как проверить...

Я подключал скрипт - Курсы валют ЦБ РФ в XML, JSON/JSONP
Он выводит корректно.

Вот скрипт:

<div id="EUR">Евро € — 00,00 руб.</div>


<script>
function CBR_XML_Daily_Ru(rates) {
	
  var EURrate = rates.Valute.EUR.Value.toFixed(4).replace('.', ',');
  var EUR = document.getElementById('EUR');
  EUR.innerHTML = EUR.innerHTML.replace('00,00', EURrate);
}
</script>
<script src="//www.cbr-xml-daily.ru/daily_jsonp.js"></script>



Подскажите, пожалуйста, как сделать тот скрипт, что Вы написали, по типу скрипта ЦБ РФ.
И как сделать, чтобы выводило только 4 цифры, то есть к примерку оно выводит 34.15000, а мне нужно 34.15





Цитата:

Сообщение от рони (Сообщение 474506)
Nik_Dev,
поробуйте так ...
<script>
window.addEventListener('DOMContentLoaded', function() {
var indx = localStorage.getItem('indx');
[].forEach.call(document.querySelectorAll('.drop li'), function(item,i) {
        item.addEventListener('click', function() {
         localStorage.setItem('indx',i);
        });
        if(i == indx) {
        jQuery(item).trigger('click')
        jQuery('.slct').text(item.textContent)
        }
    });
    });
  </script>


рони 09.01.2018 02:14

Цитата:

Сообщение от Nik_Dev
всё работает как нужно.

это всё костыли ...
Цитата:

Сообщение от Nik_Dev
а мне нужно 34.15

document.querySelector("#out").innerHTML = `Евро к гривне <br>Покупка:  ${(+data.buy).toFixed(2)}<br>Продажа: ${(+data.sale).toFixed(2)}`
Цитата:

Сообщение от Nik_Dev
не выводит результаты.

смотрите ошибки в консоли


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