JavaScript オブジェクトの表示

JavaScriptオブジェクトを表示する方法はいくつかあります。

JavaScriptオブジェクトを表示すると、[object Object]という出力が表示されます。

例

// オブジェクトを作成
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

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

JavaScriptオブジェクトを表示するためのいくつかの解決策は次の通りです:

• 名前でオブジェクトのプロパティを表示する
• ループでオブジェクトのプロパティを表示する
• Object.values()を使用してオブジェクトを表示する
• JSON.stringify()を使用してオブジェクトを表示する

オブジェクトのプロパティを表示する

オブジェクトのプロパティは文字列として表示できます:

例

// オブジェクトを作成
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// プロパティを表示
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

ループでプロパティを表示する

オブジェクトのプロパティはループで集めることができます:

例

// オブジェクトを作成
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// テキストを構築
let text = "";
for (let x in person) {
  text += person[x] + " ";
};

// テキストを表示
document.getElementById("demo").innerHTML = text;

注意:

ループ内ではperson[x]を使用する必要があります。

person.xは動作しません（xはループ変数です）。

Object.values()を使用する

Object.values()はプロパティの値から配列を作成します:

// オブジェクトを作成
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// 配列を作成
const myArray = Object.values(person);

// 配列を表示
document.getElementById("demo").innerHTML = myArray;

Object.entries()を使用する

Object.entries()はループでオブジェクトを使用することを簡単にします:

例

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "
";
}

JSON.stringify()を使用する

JavaScriptオブジェクトは、JSONメソッドJSON.stringify()を使用して文字列に変換できます。

JSON.stringify()はJavaScriptに含まれ、すべての主要ブラウザでサポートされています。

注意:

結果はJSON表記で書かれた文字列になります:

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

例

// オブジェクトを作成
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// オブジェクトを文字列に変換
let myString = JSON.stringify(person);

// 文字列を表示
document.getElementById("demo").innerHTML = myString;