JavaScript-weergaveobjecten
Hoe JavaScript-objecten weer te geven?
Als een JavaScript-object wordt weergegeven, wordt [object Object] uitgevoerd .
Voorbeeld
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Enkele veelvoorkomende oplossingen om JavaScript-objecten weer te geven zijn:
- De objecteigenschappen op naam weergeven
- De objecteigenschappen in een lus weergeven
- Het object weergeven met Object.values()
- Het object weergeven met JSON.stringify()
Objecteigenschappen weergeven
De eigenschappen van een object kunnen worden weergegeven als een string:
Voorbeeld
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Het object in een lus weergeven
De eigenschappen van een object kunnen in een lus worden verzameld:
Voorbeeld
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Je moet person[x] in de lus gebruiken.
person.x zal niet werken (omdat x een variabele is).
Object.values() gebruiken
Elk JavaScript-object kan worden geconverteerd naar een array met behulp van Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArrayis nu een JavaScript-array, klaar om te worden weergegeven:
Voorbeeld
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()wordt ondersteund in alle belangrijke browsers sinds 2016.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
JSON.stringify() gebruiken
Elk JavaScript-object kan worden gestringificeerd (geconverteerd naar een string) met de JavaScript-functie
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myStringis nu een JavaScript-tekenreeks, klaar om te worden weergegeven:
Voorbeeld
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Het resultaat is een string volgens de JSON-notatie:
{"name":"John","age":50,"city":"New York"}
JSON.stringify()is opgenomen in JavaScript en wordt ondersteund in alle belangrijke browsers.
Datums samenvoegen
JSON.stringifyzet datums om in strings:
Voorbeeld
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringify-functies
JSON.stringifyzal functies niet stringificeren:
Voorbeeld
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Dit kan worden "opgelost" als u de functies converteert naar tekenreeksen voordat u tekent.
Voorbeeld
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringify-arrays
Het is ook mogelijk om JavaScript-arrays te stringificeren:
Voorbeeld
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Het resultaat is een string volgens de JSON-notatie:
["Jan","Peter","Sally","Jane"]