IT TUTORIJALI | JavaScript

JavaScript - JSON Parsing

Šta je JSON?

JSON je skraćenica od JavaScript Object Notation. JSON je izuzetno lagan format za razmjenu podataka između servera i klijenta koji se brzo i lako razčlanjuje i generiše. Poput XML-a, JSON je takođe format zasnovan na tekstu koji je lako napisati i razumljiv je ljudima i računarima, ali za razliku od XML, JSON-ove strukture podataka zauzimaju manju širinu pojasa od svojih XML verzija. JSON se temelji na dvije osnovne strukture:

Objekt (Object): Ovo se definiše kao neuređena kolekcija parova ključ/vrijednost (tj. key:value). Svaki objekt započinje lijevom vitičastom zagradom { i završava desnom vitičastom zagradom }. Više parova ključ/vrijednost odvojeno je zarezom ,.

Niz (Array): Ovo je definisano kao uređena lista vrijednosti. Niz započinje lijevom uglastom zagradom [ i završava desnom uglastom zagradom ]. Vrijednosti su odvojene zarezom ,.

U JSON-u, imena svojstava ili ključeva uvijek su stringovi, dok vrijednost može biti string, broj, tačno, netačno, null, niz ili čak objekt (eng. string, number, true ili false, null ili array). Stringovi moraju biti zatvoreni u dvostruke navodnike " i mogu da sadrže izlazne znakove kao što su: \n, \t i \. JSON objekt može izgledati ovako:

{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "genre": "Fantasy Fiction",
        "bestseller": true
    }
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Rasčlanivanje objekta u JavaScript</title>
</head>
<body>
    <script>
    /* Pohranjivanje višerednih JSON nizova u JS varijablu
     koristeći nove ES6 predloške literatura */
    var json = `{
        "book": {
            "name": "Harry Potter and the Goblet of Fire",
            "author": "J. K. Rowling",
            "year": 2000,
            "genre": "Fantasy Fiction",
            "bestseller": true
        }
    }`;
    
    // Pretvaranje JSON objekta u JS objekt
    var obj = JSON.parse(json);
    console.log(obj);
    </script>
</body>
</html>

Dok bi primjer JSON niza izgledao otprilike ovako:

{
    "voce": [
        "Jabuka",
        "Banana",
        "Jagoda",
        "Mango"
    ]
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Rasčlanivanje JSON niza u JavaScript</title>
</head>
<body>
    <script>
    /* Pohranjivanje višerednih JSON nizova u JS varijablu
     koristeći nove ES6 predloške literatura */
    var json = `{
        "voce": [
            "Jabuka",
            "Banana",
            "Jagoda",
            "Mango"
        ]
    }`;
    
    // Pretvaranje JSON objekta u JS objekt
    var obj = JSON.parse(json);
    console.log(obj);
    </script>
    <p><strong>Napomena:</strong> Molimo provjerite pretraživač
    konzole pritiskom na tipku f12 na tastaturi.</p>
</body>
</html>

Savjet!

Format za razmjenu podataka je tekstualni format koji se koristi za razmjenu podataka između različitih platformi i operativnih sistema. JSON je najpopularniji i najlakši format za razmjenu podataka za web aplikacije.

Razčlanjivanje JSON podataka u JavaScript

U JavaScript možete jednostavno razčlaniti JSON podatke primljene s web servera metodom JSON.parse(). Ova metoda razčlanjuje JSON niz i konstruiše JavaScript vrijednost ili objekt opisan nizom. Ako zadani niz JSON-a nije valjan, dobićete sintaksnu grešku (eng. syntax error). Pretpostavimo da smo od web servera dobili sljedeći string kodiran u JSON-u:

{"name": "Miloš", "age": 29, "country": "Bosnia and Herzegovina"}

Sada možemo jednostavno koristiti JavaScript JSON.parse() metodu za pretvaranje ovog JSON stringa u JavaScript objekt i pristupiti pojedinačnim vrijednostima pomoću notacije tačke (.), Poput ove:

// Pohranjivanje JSON podatke u JS varijablu
var json = '{"name": "Miloš", "age": 29, "country": "Bosnia and Herzegovina"}';

// Pretvaranje JSON kodiranog niza u JS objekt
var obj = JSON.parse(json);

// Pristupanje pojedinačnoj vrijednosti iz JS objekta
alert(obj.name); // Ispisuje: Miloš
alert(obj.age); // Ispisuje: 29
alert(obj.country); // Ispisuje: Bosnia and Herzegovina

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pretvorite JSON stringa u JavaScript objektu i pristupanje pojedinačnim vrijednostima</title>
</head>
<body>
    <script>
    // Pohranjivanje JSON podatke u JS varijablu
    var json = '{"name": "Miloš", "age": 29, "country": "Bosnia and Herzegovina"}';
    
    // Pretvaranje JSON kodiranog stringa u JS objekt
    var obj = JSON.parse(json);
    
    // Pristup pojedinačnoj vrijednosti iz JS objekta
    document.write(obj.name + "<br>"); // Ispisuje: Miloš
    document.write(obj.age + "<br>"); // Ispisuje: 29
    document.write(obj.country); // Ispisuje: Bosnia and Herzegovina
    </script>
</body>
</html>

Pogledajte lekciju o PHP razčlanjivanju JSON-a da biste naučili, kako vratiti JSON podatke s web servera kao odgovor, kao i kako kodirati / dekodirati JSON podatke na strani servera pomoću PHP-a.

Razčlanjivanje ugnježdenih JSON podataka u JavaScript

JSON objekti i nizovi se takođe mogu ugnjezditi. JSON objekt može proizvoljno da sadrži druge JSON objekte, nizove, ugnježdene nizove, nizove JSON objekata itd. Sljedeći primjer će vam pokazati kako razčlaniti ugnježdeni JSON objekt i izvući sve vrijednosti u JavaScript.

/* Pohranjivanje višerednih JSON nizova u JS varijablu
koristeći nove ES6 predloške literatura */
var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fantasy Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;

// Pretvaranje JSON objekta u JS objekt
var obj = JSON.parse(json);

// Definisanje rekurzivne funkcije za ispis ugniježdenih vrijednosti
function printValues(obj) {
    for(var k in obj) {
        if(obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};

// Ispis svih vrijednosti iz rezultirajućeg objekta
printValues(obj);

document.write("<hr>");

// Ispis pojedinačne vrijednosti
document.write(obj["book"]["author"] + "<br>");  // Ispisuje: J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>");  // Ispisuje: Harry Potter
document.write(obj["book"]["price"]["hardcover"]);  // Ispisuje: $20.32

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Rasčlanjivanje ugniježdenih JSON podatke u JavaScript-u</title>
</head>
<body>
    <script>
    /*Pohranjivanje višerednih JSON nizova u JS varijablu
     koristeći nove ES6 predloške literatura */
    var json = `{
        "book": {
            "name": "Harry Potter and the Goblet of Fire",
            "author": "J. K. Rowling",
            "year": 2000,
            "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
            "genre": "Fantasy Fiction",
            "price": {
                "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
            }
        }
    }`;
    
    // Pretvaranje JSON objekta u JS objekt
    var obj = JSON.parse(json);
    
    // Definirsanje rekurzivne funkcije za ispis ugniježdenih vrijednosti
    function printValues(obj) {
        for(var k in obj) {
            if(obj[k] instanceof Object) {
                printValues(obj[k]);
            } else {
                document.write(obj[k] + "<br>");
            };
        }
    };
    
    // Ispis svih vrijednosti iz rezultirajućeg objekta
    printValues(obj);
    
    document.write("<hr>");
    
    // Ispis pojedinačne vrijednosti
    document.write(obj["book"]["author"] + "<br>");  // Ispisuje: J. K. Rowling
    document.write(obj["book"]["characters"][0] + "<br>");  // Ispisuje: Harry Potter
    document.write(obj["book"]["price"]["hardcover"]);  // Ispisuje: $20.32
    </script>
</body>
</html>

Kodiranje podataka kao JSON u JavaScript

Ponekad JavaScript objekat ili vrijednost iz vašeg koda treba prenijeti na poslužitelj tokom Ajax komunikacije. JavaScript u tu svrhu pruža metodu JSON.stringify() koja pretvara JavaScript vrijednost u JSON string, kao što je prikazano u nastavku.

Stringificiranje (Stringify) JavaScript objekt

Sljedeći primjer će vam pokazati kako pretvoriti JavaScript objekt u JSON string:

// Jednostavan JS objekt
var obj = {"name": "Miloš", "age": 29, "country": "Bosnia and Herzegovina"};

// Pretvaranje JS objekta u JSON string
var json = JSON.stringify(obj);
alert(json);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pretvaranje JavaScript objekta u JSON string</title>
</head>
<body>
    <script>
    // Jednostavan JS objekt
    var obj = {"name": "Miloš", "age": 29, "country": "Bosnia and Herzegovina"};
    
    // Pretvaranje JS objekta u JSON string
    var json = JSON.stringify(obj);
    document.write(json);
    </script>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Napomena!

Iako JavaScript i JSON objekti izgledaju prilično slično, oni nisu potpuno isti. Na primjer, u JavaScript, nazivi svojstava objekta mogu biti zatvoreni u pojedinačne ('...'), dvostruke navodnike ("..."), ili navodnike možete u potpunosti izostaviti. Ali, u JSON-u, sva imena svojstava moraju biti zatvorena u dvostruke navodnike ("...").

Stringificirajte (Stringify) JavaScript niz

Slično tome, JavaScript nizove možete pretvoriti u JSON stringove, ovako:

// Jednostavan JS niz
var arr = ["Jabuka", "Banana", "Mango", "Narandža", "Papaja"];

// Pretvaranje JS niza u JSON string
var json = JSON.stringify(arr);
alert(json);

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pretvaranje JavaScript niza u JSON string</title>
</head>
<body>
    <script>
    // Jednostavan JS niz
    var arr = ["Jabuka", "Banana", "Mango", "Narandža", "Papaja"];
    
    // Pretvaranje JS niza u JSON string
    var json = JSON.stringify(arr);
    document.write(json);
    </script>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Upozorenje!

Ne koristite funkciju eval() za procjenu JSON podataka (npr., uključujući definicije funkcija u JSON string i pretvarajući ih nazad u izvršne funkcije metodom eval(), jer omogućava napadaču da u vašu aplikaciju ubrizga zlonamjeran JavaScript kod.