Javascript Object Display

JavaScript 오브젝트를 표시하면 [object Object]가 출력됩니다.

let person = { name: "John", age: 30, city: "New York" };
document.getElementById("demo").innerHTML = person; // [object Object]

JavaScript 오브젝트를 표시하는 몇 가지 일반적인 솔루션은 다음과 같습니다.

• 이름으로 오브젝트 프로퍼티 표시
• 루프에 오브젝트 프로퍼티 표시
• Object.values()를 사용하여 오브젝트 표시
• JSON.stringify()를 사용하여 객체 표시

오브젝트의 프로퍼티들은 문자열로 표시될 수 있습니다.

let person = { name: "John", age: 50, city: "New York" };
 
document.getElementById("demo1").innerHTML = 
person.name + "," + person.age + "," + person.city;  // John,50,New York
document.getElementById("demo2").innerHTML = person;  // [object Object]
console.log(person);  // {name: "John", age: 50, city: "New York"}

오브젝트의 프로퍼티는 루프에서 수집될 수 있습니다.

let x, txt = "";
let person = { name: "Ellie", age: 35, city: "Los Angeles" };
 
for (x in person) {
  txt += person[x] + " ";
};
 
document.getElementById("demo").innerHTML = txt;  // Ellie 35 Los Angeles

루프에서 %%person[x]%%를 사용해야 합니다.
%%person.x%%는 작동하지 않습니다 (x는 변수이기 때문에).

모든 JavaScript 오브젝트는 Object.values()를 사용하여 배열로 변환할 수 있습니다.

let person = {name:"John", age:30, city:"New York"};
 
let myArray = Object.values(person);

myArray는 이제 표시할 준비가 된 JavaScript 배열입니다.

let person = { name: "John", age: 50, city: "New York" };
let myArray = Object.values(person);
document.getElementById("demo1").innerHTML = person;  // [object Object]
console.log(person);  // {name: "John", age: 50, city: "New York"}
document.getElementById("demo2").innerHTML = myArray; // John,50,New York
console.log(myArray); // (3) ["John", 50, "New York"]