JSON.parse()

Sisällysluettelo

JSONin yleinen käyttö on tiedon vaihtaminen verkkopalvelimelle/palvelimelta.

Kun vastaanotetaan tietoja web-palvelimelta, data on aina merkkijono.

Jäsennä tiedot komennolla JSON.parse(), ja tiedoista tulee JavaScript-objekti.

Esimerkki - JSON-jäsennys

Kuvittele, että saimme tämän tekstin verkkopalvelimelta:

'{"name":"John", "age":30, "city":"New York"}'

Muunna teksti JavaScript-objektiksi JavaScript-funktiolla JSON.parse():

const obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');

Varmista, että teksti on JSON-muodossa, tai muuten saat syntaksivirheen.

Käytä JavaScript-objektia sivullasi:

Esimerkki

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

Joukko JSON-muodossa

Kun käytetään JSON.parse()-koodia taulukosta johdetulle JSON-tiedostolle, menetelmä palauttaa JavaScript-taulukon JavaScript-objektin sijaan.

Esimerkki

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

Poikkeukset

Jäsennyspäivämäärät

Päivämääräobjektit eivät ole sallittuja JSONissa.

Jos sinun on lisättävä päivämäärä, kirjoita se merkkijonona.

Voit muuntaa sen takaisin päivämääräobjektiksi myöhemmin:

Esimerkki

Muunna merkkijono päivämääräksi:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Tai voit käyttää JSON.parse()-funktion toista parametria, jota kutsutaan nimellä reviver.

Parametri reviver on funktio, joka tarkistaa jokaisen ominaisuuden, ennen arvon palauttamista.

Esimerkki

Muunna merkkijono päivämääräksi reviver-funktiolla:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Jäsennysfunktiot

Toiminnot eivät ole sallittuja JSONissa.

Jos haluat sisällyttää funktion, kirjoita se merkkijonona.

Voit muuntaa sen myöhemmin takaisin funktioksi:

Esimerkki

Muunna merkkijono funktioksi:

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

Sinun tulee välttää funktioiden käyttöä JSONissa, funktiot menettävät soveltamisalansa, ja sinun on käytettävä eval()-komentoa muuntaaksesi ne takaisin funktioiksi.