NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Proč když funkční kód na zobrazení JSON přepíšu pro jiné url a změním potřebná data, tak se mi nic nezobrazí?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
david751
Člen
Avatar
david751:20.3.2020 20:46

Ahoj, hledal jsem jestli mohu pomocí javascriptu načít nějaký JSON. Našel jsem jedne příklad zde. Tento kód funguje.

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="mypanel"></div>

    <script>
    $.getJSON('http://time.jsontest.com', function(data) {

        var text = `Date: ${data.date}<br>
                    Time: ${data.time}<br>
                    Unix time: ${data.milliseconds_since_epoch}`


        $(".mypanel").html(text);
    });
    </script>

</body>
</html>

Tento funkční kód jsem přepsal na jiný pro vytažení dat z jiného JSONU

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="mypanel"></div>

    <script>
    $.getJSON('http://openexchangerates.org/api/latest.json', function(data) {

        var text = `Message: ${data.message}<br>
                    Description :${data.description}<br>`



        $(".mypanel").html(text);
    });
    </script>

</body>
</html>

Ten ale už nefunguje. Domnívám se správně, že ten script co je v hlavičce je speciální funkce právě pro ten JSON v kódu té stránky a tedy nebude pracovat s jiným? Můžu to vůbec nějak takto udělat?

Error z konzole k tomu bych dodal, že to stejné se píše u toho funkčního příkladu.

Díky

 
Odpovědět
20.3.2020 20:46
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:20.3.2020 21:30

Ten JSON se pokoušíš stahovat bez toho, abys měl u nich na testování nebo zaplacený API klíč? Jejich vývojář totiž nebyl hlupák a request bez požadovaného API klíče (APP_ID) označil status kódem 403, tzn. odpověď odmítnuta. Data z odpovědi teda nemůžeš zpracovat metodou pro success (kód 200 apod.), jelikož se jedná o chybový stav. https://jsfiddle.net/9tdsneuw/

Editováno 20.3.2020 21:32
Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět
+1
20.3.2020 21:30
Neaktivní uživatelský účet
Avatar
Døminik
Člen
Avatar
Odpovídá na Neaktivní uživatel
Døminik:21.3.2020 11:32

Díky za podnět, taky se učím JSON. Já bych chtěl vyexportovat tato data: https://interactive-static.scmp.com/…uscases.json?… jenže se mi ani v případě spojení nezobrazí. Jak bych to měl přepsat?

$.ajax({
        "url": "https://interactive-static.scmp.com/sheet/wuhan/viruscases.json?fbclid=IwAR3s8NGc3tuU3qu2KTZazFiWsT2hYSJIBegToalp1SOEi6iZ0Bonybr3uQI",
        "type": "get",
  "dataType": "json"
}).done(function (data) {
        $('p').text("Úspěch: " + data.entries + data.last_updated);
}).fail(function(jqXHR, status, error) {
        $('p').text("Chyba: " + jqXHR.responseJSON.entries + jqXHR.responseJSON.last_updated);
});
 
Nahoru Odpovědět
21.3.2020 11:32
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Døminik
Neaktivní uživatel:21.3.2020 12:21

Ty tam máš dva viditelné problémy. Jednak by bylo potřeba vyhodit z URL ten parmetr fbclid, který Ti přidal Facebook a do URL nepatří. Kvůli tomu vrací špatný status kód.

Pak máš ještě problém s tím, že poskytovatel dat nemá nastaveny CORS hlavičky, takže Ti zpracování na klientské straně budou blokovat prohlížeče, protože stránka a zdroj nejsou na shodných doménách.

CORS budeš muset obejít. Způsobů je víc, tak tady je třeba příklad pro CORS bypass na serverové straně pro PHP. Hosting musí mít povolenu direktivu allow_url_fopen.

if(($response = @file_get_contents('https://interactive-static.scmp.com/sheet/wuhan/viruscases.json')) !== false)
{
    header('Access-Control-Allow-Origin: *'); // Není potřeba, pokud máš skript na stejné doméně
    header('Content-type: application/json; charset=utf-8');

    echo $response;
}

Pak už můžeš v klidu parsovat https://jsfiddle.net/jdmvqy6x/ (Odkaz v ukázce během víkendu zase odstraním)

Editováno 21.3.2020 12:22
Nahoru Odpovědět
+2
21.3.2020 12:21
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.