Det här är en JSON-sträng:
'{"name":"John", "age":30, "car":null}'
Inuti JSON-strängen finns ett JSON-objekt bokstavligt:
{"name":"John", "age":30, "car":null}
JSON-objekt-literaler omges av hängslen {}.
JSON-objektliterals innehåller nyckel/värdepar.
Nycklar och värden separeras med ett kolon.
Nycklar måste vara strängar, och värden måste vara en giltig JSON-datatyp:
Varje nyckel/värdepar är separerade med ett kommatecken.
Det är ett vanligt misstag att kalla ett JSON-objekt bokstavligt "ett JSON-objekt".
JSON kan inte vara ett objekt. JSON är ett strängformat.
Datan är endast JSON när den är i ett strängformat. När den konverteras till en JavaScript-variabel blir den ett JavaScript-objekt.
Du kan skapa ett JavaScript-objekt från ett JSON-objekt literal:
myObj = {"name":"John", "age":30, "car":null};
Prova själv →
<!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 skapar du ett JavaScript-objekt genom att analysera en JSON-sträng:
myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);
Prova själv →
<!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>
Du kan komma åt objektvärden genom att använda punkt (.) notation:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj.name;
Prova själv →
<!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 också komma åt objektvärden genom att använda parentes ([]) notation:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
x = myObj["name"];
Prova själv →
<!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 loopa igenom objektegenskaper med en for-in loop:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += x + ", ";
}
Prova själv →
<!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-loop använder du hakparentesnotationen för att komma åt egenskapen värden:
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
Prova själv →
<!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>