JSON bokstaver


Innehållsförteckning

    Visa innehållsförteckning


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:

  • sträng
  • nummer
  • objekt
  • matris
  • boolesk
  • null

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.


JavaScript-objekt

Du kan skapa ett JavaScript-objekt från ett JSON-objekt literal:

Exempel

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:

Exempel

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>

Åtkomst till objektvärden

Du kan komma åt objektvärden genom att använda punkt (.) notation:

Exempel

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:

Exempel

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>


Slinga ett objekt

Du kan loopa igenom objektegenskaper med en for-in loop:

Exempel

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:

Exempel

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>