JSONデータからJavaScriptを用いてHTMLを生成したいです

Question

前提・実現したいこと

JSONデータからJavaScriptを用いてHTMLを生成したく、
途中までは生成できたのですが、下記を実現する方法がわかりません。
ご教示いただければありがたいです。よろしくお願いいたします。

（１）<div class="guest"></div>を生成するためには、どのようなjavascriptのコードを追記すれば良いのでしょうか。

（２）どのようにhtmlが生成できているか確認する方法などあるのでしょうか？
（例えばconsoleなどで…。
現状のjavascriptのコードでどのようなhtmlが生成できているかわかると、何が足りないかわかりやすい・・と思いまして。
見当違いの質問でしたら申し訳ありません）

このようなhtmlを生成したいです

<div id="container">

<!-- ◎部屋：桜 -->
	<div class="roomname" id="sakura"><h2>SAKURA</h2></div>

	<div class="guest">

		<section>
			<a href="image/cake/ba_180616_2.jpg" data-lightbox="sakura">
			<img src="image/cake/ba_180616_2.jpg"></a>
		</section>

		<section>
			<a href="image/cake/ba_180616.jpg" data-lightbox="sakura">
			<img src="image/cake/ba_180616.jpg"></a>
		</section>

	</div><!-- guest -->

<!-- ◎部屋：梅 -->
	<div class="roomname" id="ume"><h2>UME</h2></div>

	<div class="guest">

		<section>
			<a href="image/cake/pa_180513.jpg" data-lightbox="ume">
			<img src="image/cake/pa_180513.jpg"></a>
		</section>

		<section>
			<a href="image/cake/pa_180722.jpg" data-lightbox="ume">
			<img src="image/cake/pa_180722.jpg"></a>
		</section>

	</div><!-- guest -->

</div><!-- container -->

現状のjsonデータ（cake.json）とjavascript

[{
    "room":{ "name": "SAKURA", "id":"sakura"},
    "item": [
         {"url": "image/cake/ba_180616_2.jpg"},
         {"url": "image/cake/ba_180616.jpg"}
    ]
},
{
    "room":{ "name": "UME", "id":"ume"},
    "item": [
        { "url": "image/cake/pa_180513.jpg"},
        { "url": "image/cake/pa_180722.jpg"}
    ]
}]

$(function(){
    $.getJSON('cake.json', function(data){
        for(var i in data){
			$('#container').append(
				'<div class="roomname" id=' + data[i].room.name +
				'><h2>' + data[i].room.id + 
				'</h2>');
					for(var j in data[i].item){
						$('#container').append(
							'<section><a href=' + data[i].item[j].url + 
							'data-lightbox=' + data[i].room.id  + 
							'><img src=' + data[i].item[j].url + 
							'></a></section>');
					}
        }
    });
});

Comments

[m.ts10806]

できれば日本語はちゃんとしていただきたく。
「JSONデータからJavaScriptを用いてHTMLを生成する」ですよね？

[tacsheaven]

このデータからだと guest は1ルームにつき一つでよいのか複数になるのかすら分かりませんね（複数の場合の例がないため）

[alpaca540]

mts10806様
ありがとうございます。修正させていただきました。

[alpaca540]

tacsheaven様
失礼しました。guestは1ルームにつき１つです。よろしくお願いいたします。

[m.ts10806]

＞guestは1ルームにつき１つです
それって固定で<div class="guest">で囲えばいい話ではないですか？

[alpaca540]

mts10806様
<div class="guest">にCSSを設定しておりまして、１ルームに１つの方法しか思いつかなかったのです。
勉強不足ですみません。

Answer 1

ちょっと雑ですがモダンブラウザならこれでいけます

<script>
window.addEventListener('DOMContentLoaded', function(e){
  fetch('cake.json').then(data=>data.json()).then(data=>{
    var html="";
    data.forEach(x=>{
      html+=`<div class="roomname" id="${x.room.name}"><h2>${x.room.id}</h2></div>`;
      html+=`<div class="guest">`;
      x.item.forEach(y=>{
        html+=`<section><a href="${y.url}" data-lightbox="${x.room.id}"><img src="${y.url}"></a></section>\n`;
      });
      html+=`</div>`;
    });
    document.querySelector('#container').innerHTML=html;
  });
});
</script>
<div id="container"></div>

Comments

[alpaca540]

yambejp様
ありがとうございました！！
希望のhtmlを生成できました。