Tämä on JSON-merkkijono:
'{"name":"John", "age":30, "car":null}'
JSON-merkkijonon sisällä on JSON-objekti literaali:
{"name":"John", "age":30, "car":null}
JSON-objekti literaalit on ympäröity aaltosulkeilla {}.
JSON-objekti literaalit sisältävät avain/arvo-pareja.
Avaimet ja arvot erotetaan kaksoispisteellä.
Avainten tulee olla merkkijonoja, ja arvojen on oltava kelvollinen JSON-tietotyyppi:
Jokainen avain/arvo-pari erotetaan pilkulla.
On yleinen virhe kutsua JSON-objektia kirjaimellisesti "JSON-objektiksi".
JSON ei voi olla objekti. JSON on merkkijonomuoto.
Data on vain JSON, kun se on merkkijonomuodossa. Kun se muunnetaan JavaScript-muuttujaksi, siitä tulee JavaScript-objekti.
Voit luoda JavaScript-objektin JSON-objektiteraalista:
myObj = {"name":"John", "age":30, "car":null};
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object from a JSON Literal</h2>
<p id="demo"></p>
<script>
const myObj = {"name":"John", "age":30, "car":null};
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
Normaalisti luot JavaScript-objektin jäsentämällä JSON-merkkijonoa:
myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object Parsing JSON</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
Voit käyttää objektien arvoja käyttämällä pisteen (.) merkintää:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj.name;
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Access a JavaScript Object</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
Voit myös käyttää objektien arvoja käyttämällä hakasulkeiden ([]) merkintää:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj["name"];
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Access a JavaScript Object</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj["name"];
</script>
</body>
</html>
Voit kiertää objektin ominaisuuksien läpi for-in-silmukalla:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += x + ", ";
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Looping Object Properties</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Käytä sisääntulosilmukassa hakasulkeiden merkintää saadaksesi käsiksi ominaisuuden arvot:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Looping JavaScript Object Values</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>