JSONにHTMLを埋め込みたい

Question

JSONデータにHTMLを埋め込みたいのですが、ベストプラクティスは何だと思いますか？
ご意見をお伺いしたいです。

自分の中では、
●ヒアドキュメントで埋め込む
●HTMLソースは外部HTMLファイルに記述しincludeする
辺りかなぁと思っています。

やりたい事は↓みたいな感じです。

{
"tier": 1, // n(数値)
"html": "
<div>
    <h1>h1sample</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
"
},
{
"tier": 2,
"html": "
<div>
    <h1>h1sample2</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
"
},
{
"tier": 3,
"html": "
<div>
    <h1>h1sample3</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
"
}

ご教示いただけましたら幸いです。
どうぞよろしくお願いいたします。

Comments

[yasutomi]

JSONの基礎が理解できていないようですので
基礎を学習後、JSONファイルの修正をお願いします。
現在の状態ですとteratailで推奨されていない「丸投げ」になります。
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON

Answer 1

とりあえずヒアドキュメントにしておけばよいのでは？

var obj=[
  {
    "tier": 1,
    "html": `
<div>
    <h1>h1sample</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
`
},
{
"tier": 2,
"html": `
<div>
    <h1>h1sample2</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
`
},
{
"tier": 3,
"html": `
<div>
    <h1>h1sample3</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
`
}
];
console.log(JSON.stringify(obj));

Comments

[otolab]

javascriptのコードとして書くだけならこれですね。
「JSONの」となるとそのへんは使えなかったはずです。（コメントアウトさえも）

Answer 2

JSONは表現力に乏しいので、あまり頑張らないほうが良いような気がします。

可読性が必要ならYAMLを使ったり、javascriptのコードとして書いてしまうとかですかね...。

このへんは何のために・何を使っているのか、などに影響されてくるので、ベストがどれとは言えません。