JSON Literals


Sisällysluettelo

    Näytä sisällysluettelo


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:

  • merkkijono
  • numero
  • objekti
  • taulukko
  • looginen
  • nolla

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.


JavaScript-objektit

Voit luoda JavaScript-objektin JSON-objektiteraalista:

Esimerkki

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:

Esimerkki

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>

Objektiarvojen käyttäminen

Voit käyttää objektien arvoja käyttämällä pisteen (.) merkintää:

Esimerkki

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ää:

Esimerkki

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>


Objektin silmukoiminen

Voit kiertää objektin ominaisuuksien läpi for-in-silmukalla:

Esimerkki

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:

Esimerkki

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>