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 rašč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-a, 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 ili netačno, null ili čak objekt ili niz (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 tipkovnici.</p>
</body>
</html>                            


Raščlanjivanje JSON podataka u JavaScript-u

U JavaScriptu možete jednostavno raščlaniti JSON podatke primljene s web servera metodom JSON.parse(). Ova metoda raščlanjuje JSON niz i konstruiše JavaScript vrijednost ili objekt opisan nizom. Ako zadani niz nije valjan JSON, 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>

Molimo pogledajte lekciju o PHP rašč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.



Raščlanjivanje ugniježdenih JSON podataka u JavaScript-u

JSON objekti i nizovi se takođe mogu ugnijezditi. JSON objekt može proizvoljno da sadrži druge JSON objekte, nizove, ugniježđene nizove, nizove JSON objekata itd. Sljedeći primjer će vam pokazati kako raščlaniti ugniježdeni JSON objekt i izvući sve vrijednosti u JavaScript-u.

/* 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-u

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>

Izlaz primjera izgledat će otprilike ovako:


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




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>

Izlaz gornjeg primjera izgledat će otprilike ovako:


["Jabuka","Banana","Mango","Narandža","Papaja"]