JavaScript-visningsobjekter

Indholdsfortegnelse

    Vis indholdsfortegnelse

Hvordan viser man JavaScript-objekter?

Visning af et JavaScript-objekt vil outputte [object Object].

Eksempel

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Displaying a JavaScript object will output [object Object]:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

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

</body>
</html>

Nogle almindelige løsninger til at vise JavaScript-objekter er:

  • Visning af objektegenskaberne efter navn
  • Visning af objektegenskaberne i en sløjfe
  • Visning af objektet ved hjælp af Object.values()
  • Visning af objektet ved hjælp af JSON.stringify()

Viser objektegenskaber

Egenskaberne for et objekt kan vises som en streng:

Eksempel

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>

</body>
</html>

Visning af objektet i en sløjfe

Egenskaberne for et objekt kan samles i en løkke:

Eksempel

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};

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

</body>
</html>

Du skal bruge person[x] i løkken.

person.x virker ikke (fordi x er en variabel).

Brug af Object.values()

Ethvert JavaScript-objekt kan konverteres til et array ved hjælp af Object.values():

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const myArray = Object.values(person);

myArray er nu et JavaScript-array, klar til at blive vist:

Eksempel

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Object.values() converts an object to an array.</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = Object.values(person);
</script>

</body>
</html>

Object.values() er understøttet i alle større browsere siden 2016.

54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

Brug af JSON.stringify()

Ethvert JavaScript-objekt kan stringificeres (konverteres til en streng) med JavaScript-funktionen JSON.stringify():

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let myString = JSON.stringify(person);

myString er nu en JavaScript-streng, klar til at blive vist:

Eksempel

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display properties in JSON format:</p>

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

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Resultatet vil være en streng efter JSON-notationen:

{"name":"John","age":50,"city":"New York"}

JSON.stringify() er inkluderet i JavaScript og understøttes i alle større browsere.

Stringify datoer

JSON.stringify konverterer datoer til strenge:

Eksempel

const person = {
  name: "John",
  today: new Date()
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will convert dates into strings:</p>

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

<script>
var person = {
  name: "John",
  today: new Date()
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Stringify funktioner

JSON.stringify vil ikke stringify funktioner:

Eksempel

const person = {
  name: "John",
  age: function () {return 30;}
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will not stringify functions:</p>

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

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Dette kan "rettes", hvis du konverterer funktionerne til strenge før strengning.

Eksempel

const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Display Objects</h2>
<p>JSON.stringify will not stringify functions.</p>
<p>You have to convert functions to strings first:</p>

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

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

Stringify Arrays

Det er også muligt at stringify JavaScript-arrays:

Eksempel

const arr = ["John", "Peter", "Sally", "Jane"];

let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<p>JSON.stringify can stringify arrays:</p>

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

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
</script>

</body>
</html>

Resultatet vil være en streng efter JSON-notationen:

["John","Peter","Sally","Jane"]