console.logで表示される結果をテキストにしてHTML上に表示できないか？

Question

JavaScriptでオブジェクトの中身をHTML上にテキストとして表示する良い方法はないでしょうか？

たとえば、以下のようなオブジェクトobjがあるとします。

const obj = {
  name:"slime",
  status:{hp:20,attack:8,def:4,speed:12},
  home:"forest"
};

2つめのプロパティーstatusがオブジェクトになっています。

オブジェクトの中身を確認するだけならconsole.logをつかって開発者ツール上で表示すればいいですが、その内容をHTML上に表示する必要があります。

この例のようにプロパティーの数が少なければ、単に一つずつ、

element.innerText =`
  name: ${obj.name}\n
  status: hp: ${obj.status.hp},attack:${obj.status.attack},def:${obj.status.def},speed:${obj.status.speed}
  home: ${obj.home}
`;

として、手動で書き下せばよいのですが、プロパティの数が多かったり、オブジェクトが階層構造になっていたりすると、非常に煩雑になります。

たとえば、上記のstatusプロパティのオブジェクトの中身をconsole.logのようなものでぱっと展開してそれをテキストにして返してくれる関数があれば楽なのに、と思いました。

何か良い方法はないでしょうか？
ご意見いただけると幸いです。

Answer 1

JSON.stringify(obj.status) はいかがでしょうか。

Comments

[tetatetu]

ご回答ありがとうございます。助かりました。

[tetatetu]

ご回答ありがとうございます。助かりました。
当面はこれで困らなさそうなので、これで行こうと思います。