JSON (JavaScript Object Notation - notacja obiektu JavaScript)

JSON (JavaScript Object Notation) - to format do przechowywania i przesyłania danych.
XML - format danych
HTML - format danych

format HTML

<div class="event">
  <p><b>Sosnowiec, SO</b><br>
  Powierzchnia: 91 km²</p>
  <img src="grafika/herb-so.png" alt="herb Sosnowca" />
</div>
<div class="event">
  <p><b>Dąbrowa Górnicza, DG</b><br>
  Powierzchnia: 189 km²</p>
  <img src="grafika/herb-dg.png" alt="herb Dąbrowy Górniczej" />
</div>
<div class="event">
  <p><b>Katowice, KC</b><br>
  Powierzchnia: 164 km²</p>
  <img src="grafika/herb-kc.png" alt="herb Katowic" />
</div>

wyświetl przykład

format XML

<?xml version="1.0" encoding="utf-8" ?>
<events>
  <event>
    <location>Sosnowiec, SO</location>
    <area>91 km²</area>
    <herb>grafika/herb-so.png</herb>
  </event>
  <event>
    <location>Dąbrowa Górnicza, DG</location>
    <area>189 km²</area>
    <herb>grafika/herb-dg.png</herb>
  </event>
  <event>
    <location>Katowice, KC</location>
    <area>164 km²</area>
    <herb>grafika/herb-kc.png</herb>
  </event>
</events>

wyświetl przykład

format JSON

{
  "events": [
    {
      "location": "Sosnowiec, SO",
      "area": "91 km²",
      "herb": "grafika/herb-so.png"
    },
    {
      "location": "Dąbrowa Górnicza, DG",
      "area": "189 km²",
      "herb": "grafika/herb-dg.png"
    },
    {
      "location": "Katowice, KC",
      "area": "164 km²",
      "herb": "grafika/herb-ko.png"
    }
  ]
}

wyświetl przykład

Metody JSON

właściwość	opis
parse()	Konwertuje string JSON na obiekt JavaScript.
stringify()	Konwertuj obiekt JavaScript na string JSON.

JSON.parse()

<script type="text/javascript">
const json = '{"name":"Paul", "number":22, "activePlayer":true}';
const obj = JSON.parse(json);

document.write(obj + "<br />" + obj.name + "<br />" + obj.number + "<br />" + obj.activePlayer);
</script>

wynik skryptu



<p id="transformacja"> </p>
<script>
var object = JSON.parse('{"firstName":"Antonio", "lastName":"Antonowicz", "age":"19"}');
document.getElementById("transformacja").innerHTML = object.firstName;
</script>

wynik skryptu

 

<p id="transformacja02"> </p>
<script>
var object = JSON.parse('{"firstName":"Antonio", "lastName":"Antonowicz", "age":"19"}');
document.getElementById("transformacja02").innerHTML = object.lastName;
</script>

wynik skryptu

 

<p id="transformacja03"> </p>
<script>
var object = JSON.parse('{"firstName":"Antonio", "lastName":"Antonowicz", "age":"19"}');
document.getElementById("transformacja03").innerHTML = object.age;
</script>

wynik skryptu

 

JSON.stringify()

<script type="text/javascript">
document.write(JSON.stringify({ x: 2, y: 3 }));
document.write("<br />");
document.write(JSON.stringify([new Number(4), new String('true'), new Boolean(true)]));
document.write("<br />");
document.write(JSON.stringify({ z: [5, undefined, function(){}] }));
document.write("<br />");
document.write(JSON.stringify(new Date(2023, 0, 30, 1, 2, 3)));
</script>

wynik skryptu