Johdatus ohjelmointiin
Lue seuraavan JSON -objektin arvot ja tulosta ne alertilla.
{"nimi": "Pekka", "ika": 25, "maa": "Suomi"}
/* 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.
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ä.
var arr = ["Omena", "Banaani", "Mango", "Appelisiini", "Papaija"];
<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>