JSON är ett format för att lagra och transportera data.
JSON används ofta när data skickas från en server till en webb sida.
JSON står för JavaScript Object Notation
JSON är ett lättviktsformat för datautbyte
JSON är språkoberoende *
JSON är "självbeskrivande" och lätt att förstå
* JSON-syntaxen härleds från JavaScript-objektnotationssyntax, men JSON-formatet är endast text. Kod för att läsa och generera JSON-data kan skrivas i valfri programmering språk.
Den här JSON-syntaxen definierar ett anställdas objekt: en array med 3 anställdas poster (objekt):
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
JSON-formatet är syntaktiskt identiskt med koden för att skapa JavaScript-objekt.
På grund av denna likhet, ett JavaScript-program kan enkelt konvertera JSON-data till native JavaScript-objekt.
Data är i namn/värdepar
Data separeras med kommatecken
Lockiga hängslen håller föremål
Hakparenteser håller arrayer
JSON-data skrivs som namn/värdepar, precis som JavaScript-objekt egenskaper.
Ett namn/värdepar består av ett fältnamn (i dubbla citattecken), följt av ett kolon, följt av ett värde:
"firstName":"John"
JSON-namn kräver dubbla citattecken. JavaScript-namn gör det inte.
JSON-objekt skrivs inuti lockiga hängslen.
Precis som i JavaScript kan objekt innehålla flera namn/värdepar:
{"firstName":"John", "lastName":"Doe"}
JSON-matriser skrivs inom hakparenteser.
Precis som i JavaScript kan en array innehålla objekt:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
I exemplet ovan är objektet "anställda" en array. Den innehåller tre föremål.
Varje objekt är ett register över en person (med ett förnamn och ett efternamn).
En vanlig användning av JSON är att läsa data från en webbserver, och visa data på en webbsida.
För enkelhetens skull kan detta demonstreras med en sträng som indata.
Skapa först en JavaScript-sträng som innehåller JSON-syntax:
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
Använd sedan den inbyggda JavaScript-funktionen JSON.parse()
för att konvertera strängen till ett JavaScript-objekt:
const obj = JSON.parse(text);
Använd slutligen det nya JavaScript-objektet på din sida:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>
Du kan läsa mer om JSON i vår JSON-handledning.