Агуулга
var person = {name:"John", age:30, city:"New York"};
document.getElementById("demo").innerHTML = person; Some common solutions to display JavaScript objects are:
- Displaying the Object Properties by name
- Displaying the Object Properties in a Loop
- Displaying the Object using Object.values()
- Displaying the Object using JSON.stringify()
Displaying Object Properties #
The properties of an object can be displayed as a string:
Example #
var person = {name:"John", age:30, city:"New York"};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
var x, txt = "";
var person = {name:"John", age:30, city:"New York"};
for (x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt; You must use person[x] in the loop.
person.x will not work (Because x is a variable).
Using Object.values() #
Any JavaScript object can be converted to an array using Object.values():
var person = {name:"John", age:30, city:"New York"};
var myArray = Object.values(person); myArray is now a JavaScript array, ready to be displayed:
Example #
var person = {name:"John", age:50, city:"New York"};
var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values() is supported in all major browsers since 2016.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Using JSON.stringify() #
Any JavaScript object can be stringified (converted to a string) with the JavaScript function JSON.stringify():
var person = {name:"John", age:30, city:"New York"};
var myString = JSON.stringify(person); myString is now a JavaScript string, ready to be displayed:
Example #
var person = {name:"John", age:30, city: "New York"};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString; var person = {name:"John", today:new Date()};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString; var person = {name:"John", age:function () {return 30;}};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString; This can be “fixed” if you convert the functions into strings before stringifying.
Example #
var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString; var arr = ["John", "Peter", "Sally", "Jane"];
var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
The result will be a string following the JSON notation:
[“John”,”Peter”,”Sally”,”Jane”]
