JSON.parse()

Indholdsfortegnelse

En almindelig brug af JSON er at udveksle data til/fra en webserver.

Når du modtager data fra en webserver, er dataene altid en streng.

Parse dataene med JSON.parse(), og dataene bliver et JavaScript-objekt.

Eksempel - Parsing JSON

Forestil dig, at vi modtog denne tekst fra en webserver:

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

Brug JavaScript-funktionen JSON.parse() til at konvertere tekst til et JavaScript-objekt:

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

Sørg for, at teksten er i JSON-format, ellers får du en syntaksfejl.

Brug JavaScript-objektet på din side:

Eksempel

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

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

Prøv det selv →

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

Array som JSON

Når du bruger JSON.parse() på en JSON afledt fra et array, vil metoden returnere et JavaScript-array i stedet for et JavaScript-objekt.

Eksempel

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

Prøv det selv →

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

Undtagelser

Parsing datoer

Datoobjekter er ikke tilladt i JSON.

Hvis du skal inkludere en dato, så skriv den som en streng.

Du kan konvertere det tilbage til et datoobjekt senere:

Eksempel

Konverter en streng til en dato:

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;

Prøv det selv →

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

Eller du kan bruge den anden parameter i funktionen JSON.parse(), kaldet reviver.

Parameteren reviver er en funktion, der kontrollerer hver egenskab, før du returnerer værdien.

Eksempel

Konverter en streng til en dato ved hjælp af funktionen genoplivning:

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;

Prøv det selv →

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

Parsing funktioner

Funktioner er ikke tilladt i JSON.

Hvis du skal inkludere en funktion, så skriv den som en streng.

Du kan konvertere den tilbage til en funktion senere:

Eksempel

Konverter en streng til en funktion:

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();

Prøv det selv →

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

Du bør undgå at bruge funktioner i JSON, funktionerne vil miste deres omfang, og du skal bruge eval() for at konvertere dem tilbage til funktioner.