Johdatus ohjelmointiin

Sorakuilu

JSON, yksinkertainen demo

Muunnos JavaScriptiksi, JSON.parse

Lue seuraavan JSON -objektin arvot ja tulosta ne alertilla.

{"nimi": "Pekka", "ika": 25, "maa": "Suomi"}

Sisennetyn JSON Datan muuntaminen JavaScriptiksi


/* Tallenna monirivinen JSON string JS muuttujaan ES6 (ECMA SCRIPT) merkinnöillä */
var json = `{
    "kirja": {
        "nimi": "Harry Potter",
        "kirjailija": "J. K. Rowling",
        "vuosi": 2000,
        "hahmot": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "laji": "Fantasy Fiction",
        "hinta": {
            "pokkari": "10,40€", "kovakantinen": "20,30€", "e-kirja": "4,10€"
        }
    }
}`;

Lue edellisen JSON -objektin arvot ja tulosta ne alertilla.

Muunna JavaSCript JSONiksi

Joskus joudutaan siirtämään JavaScriptistä tietoa palvelimelle Ajax-yhteyttä käyttämällä. Siihen käytetään JSON.stringify() -metodia.


// Esimerkkiobjekti JavaScriptiä
var obj = {"nimi": "Pekka", "ika": 25, "maa": "Suomi"}

Muunna objekti JSON merkkijonoksi ja tulosta alertilla

Huomaa: Vaikka JavaScript ja JSON objektit näyttävät melko samanlaisilta, ne eivät oikeasti ole ihan samat. Esim. JavaScriptin olion ominaisuuksien nimet voi sulkea heittomerkeillä ('...') tai lainausmerkeillä("..."), tai ne voi jättää kokonaan pois. Mutta JSONissa kaikki ominaisuuksien nimet tulee sulkea lainausmerkeillä.

Muunna JavaScript Array JSON merkkijonoksi ja tulosta alertilla


var arr = ["Omena", "Banaani", "Mango", "Appelisiini", "Papaija"];

Lähdekoodi

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONdemo 1</title>
</head>
<body>


<!-- Lue seuraavan JSON -objektin arvot ja tulosta ne alertilla.

{"nimi": "Pekka", "ika": 25, "maa": "Suomi"}-->

<script>
var json = '{"nimi": "Pekka", "ika": 25, "maa": "Suomi"}';
// muuttuja on siis tekstiä, sen takia heittomerkit alussa ja lopussa

var obj = JSON.parse(json);
//muuttaa tekstimuuttujan JavaScript-olioksi

alert(obj.nimi);
alert(obj.ika);
alert(obj.maa);
//avaimella viitataan olion ominaisuuksiin

</script>



<!-- Tallenna monirivinen JSON string JS muuttujaan ES6 (ECMA SCRIPT) merkinnöillä */
var json = `{
    "kirja": {
        "nimi": "Harry Potter",
        "kirjailija": "J. K. Rowling",
        "vuosi": 2000,
        "hahmot": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "laji": "Fantasy Fiction",
        "hinta": {
            "pokkari": "10,40€", "kovakantinen": "20,30€", "e-kirja": "4,10€"
        }
    }
}`;

Lue edellisen JSON -objektin arvot ja tulosta ne.-->

<div id="testi1"></div>
<div id="testi2"></div>

<script>
    var json1 = `{
    "kirja": {
        "nimi": "Harry Potter",
        "kirjailija": "J. K. Rowling",
        "vuosi": 2000,
        "hahmot": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "laji": "Fantasy Fiction",
        "hinta": {
            "pokkari": "10,40€", "kovakantinen": "20,30€", "e-kirja": "4,10€"
        }
    }
}`;

var obj1 = JSON.parse(json1);

function tulostaArvot(obj1) {
    for(var k in obj1) {
        if(obj1[k] instanceof Object) { //lukee hinnat
            tulostaArvot(obj1[k]);
        }
        else {
            document.getElementById("testi1").innerHTML += obj1[k] +"<br>";
        }
    }
};
tulostaArvot(obj1);
document.getElementById("testi2").innerHTML ='<hr>';
document.getElementById("testi2").innerHTML += obj1["kirja"]["kirjailija"] + "<br>";
document.getElementById("testi2").innerHTML += obj1["kirja"]["hahmot"][0] + "<br>";
document.getElementById("testi2").innerHTML += obj1["kirja"]["hinta"]["kovakantinen"];
</script>

<h2>Muunna JavaSCript JSONiksi - stringify </h2>

<script>
// Esimerkkiobjekti JavaScriptiä
var obj2 = {"nimi": "Pekka", "ika": 25, "maa": "Suomi"}
var json2 = JSON.stringify(obj2);
alert(json2);

</script>

<h2>Muunna JavaScript Array JSONiksi</h2>
<script>
// Esimerkki: JS array
var arr = ["Omena", "Banaani", "Mango", "Appelsiini", "Papaija"];
var json3 = JSON.stringify(arr);
alert(json3);

</script>
</body>
</html>