En vanlig användning av JSON är att utbyta data till/från en webbserver.
När man tar emot data från en webbserver är data alltid en sträng.
Analysera data med JSON.parse()
och data blir ett JavaScript-objekt.
Föreställ dig att vi fick den här texten från en webbserver:
'{"name":"John", "age":30, "city":"New York"}'
Använd JavaScript-funktionen JSON.parse()
för att konvertera text till ett JavaScript-objekt:
const obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Se till att texten är i JSON-format, annars får du ett syntaxfel.
Använd JavaScript-objektet på din sida:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name;
</script>
Prova själv →
<!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>
När du använder JSON.parse()
på en JSON som härrör från en array, kommer metoden att returnera en JavaScript-array istället för ett JavaScript-objekt.
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);
Prova själv →
<!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>
Datumobjekt är inte tillåtna i JSON.
Om du behöver inkludera ett datum, skriv det som en sträng.
Du kan konvertera tillbaka det till ett datumobjekt senare:
Konvertera en sträng till ett datum:
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;
Prova själv →
<!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 så kan du använda den andra parametern i funktionen JSON.parse()
, kallad reviver.
Parametern reviver är en funktion som kontrollerar varje egenskap, innan du returnerar värdet.
Konvertera en sträng till ett datum med funktionen reviver:
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;
Prova själv →
<!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>
Funktioner är inte tillåtna i JSON.
Om du behöver inkludera en funktion, skriv den som en sträng.
Du kan konvertera tillbaka den till en funktion senare:
Konvertera en sträng till 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();
Prova själv →
<!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 undvika att använda funktioner i JSON, funktionerna kommer att förlora sin omfattning, och du skulle behöva använda eval()
för att konvertera dem tillbaka till funktioner.