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"]

JavaScript 함수 JSON.stringify()를 사용하여 모든 JavaScript 오브젝트를 문자열화(문자열로 변환) 할 수 있습니다.

let person = {name:"John", age:30, city:"New York"};
 
let myString = JSON.stringify(person);

myString은 이제 표시할 준비가 된 JavaScript 문자열입니다.

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

결과는 %%JSON%% 표기법을 따르는 문자열입니다.
{"name": "John", "age": 50, "city": "New York"}

JSON.stringify()는 JavaScript에 포함되어 있으며, 모든 주요 브라우저에서 지원됩니다.

JSON.stringify는 날짜를 문자열로 변환합니다.

JSON.stringify는 함수를 문자열화 하지 않습니다.

스트링 화하기 전에 함수를 스트링으로 변환하면 “고정”될 수 있습니다.

JavaScript 배열을 스트링화 하는 것도 가능합니다.

결과는 %%JSON%% 표기법을 따르는 문자열입니다.
[ "John", "Peter", "Sally", "Jane"]