JSON bogstaver

Indholdsfortegnelse

    Vis indholdsfortegnelse

Dette er en JSON-streng:

'{"name":"John", "age":30, "car":null}'

Inde i JSON-strengen er der et JSON-objekt bogstaveligt:

{"name":"John", "age":30, "car":null}

JSON-objektliteraler er omgivet af krøllede klammeparenteser {}.

JSON-objektliteraler indeholder nøgle/værdi-par.

Nøgler og værdier er adskilt af et kolon.

Nøgler skal være strenge, og værdier skal være en gyldig JSON-datatype:

  • streng
  • nummer
  • objekt
  • array
  • boolesk
  • nul

Hvert nøgle/værdi-par er adskilt af et komma.

Det er en almindelig fejl at kalde et JSON-objekt bogstaveligt "et JSON-objekt".

JSON kan ikke være et objekt. JSON er et strengformat.

Dataene er kun JSON, når de er i et strengformat. Når det konverteres til en JavaScript-variabel, bliver det et JavaScript-objekt.

JavaScript objekter

Du kan oprette et JavaScript-objekt fra et JSON-objekt literal:

Eksempel

myObj = {"name":"John", "age":30, "car":null};

Prøv det selv →

<!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>

Normalt opretter du et JavaScript-objekt ved at parse en JSON-streng:

Eksempel

myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);

Prøv det selv →

<!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>

Adgang til objektværdier

Du kan få adgang til objektværdier ved at bruge prik (.) notation:

Eksempel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj.name;

Prøv det selv →

<!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>

Du kan også få adgang til objektværdier ved at bruge parentes ([]) notation:

Eksempel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj["name"];

Prøv det selv →

<!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>

At sløjfe et objekt

Du kan sløjfe gennem objektegenskaber med en for-in-løkke:

Eksempel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}

Prøv det selv →

<!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>

I en for-in-løkke skal du bruge parentesnotationen til at få adgang til egenskaben værdier:

Eksempel

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}

Prøv det selv →

<!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>