JavaScriptで繰り返しhtmlを生成したいが、コンテンツが上書きされてしまう

実現したいこと

JavaScript初心者です。食べログでレストランが一覧で見れる(https://tabelog.com/kyoto/)のと同じように、共通構造がズラッと並んだページを1つ作りたいです。

前提

JQueryでhtml構造を生成しています。
MySQL等操作にはまだ手が出ないので、ひとまず同html内にある連想配列から要素を引っ張り出す流れにしたいです。

発生している問題・エラーメッセージ

for文でやろうとすると同じ構造は自動で作れるのですが、コンテンツが上書きされて全て同じ内容になってしまいます。

以下のソースコードで言うと、
html構造は要素の数だけ生成できるものの、その両方ともコンテンツが最終要素で上書きされてしまい、困っています。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5</head>
6
7<div id='container'></div>
8
9<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
10<script>
11	var data = [{
12		name: 'Aさん',
13		area: '京都',   
14		},{
15		name: 'Bさん',
16		area: '東京',   
17	}];
18
19	for (var i = 0; i < data.length; i++) {
20		
21	$('#container').append($('<div/>').append($('<div/>').append('<h3>').append('<p>')));
22	$('#container>div').addClass('farmers');
23	$('.farmers div:nth-child(1)').addClass('info');
24	$('.info h3:nth-child(1)').addClass('name').text(data[i]['name']);
25	$('.info p:nth-child(2)').addClass('area').text(data[i]['area']);
26	}	
27</script>
28</body>
29</html>

どなたかご教示いただけると幸いです！

行動規範の内容に同意します

回答3件

こんな感じがスマートですかね・・

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  var data = [
5    { name: 'Aさん', area: '京都',},
6    { name: 'Bさん', area: '東京',},
7    ];
8    $('#container').append(
9      $.map(data,function(x){
10        return $('<div>').addClass('farmers').append(
11          $('<div>').addClass('info').append(
12            $('<h3>').addClass('name').text(x.name),
13            $('<p>').addClass('area').text(x.area)
14            )
15          )
16        })
17      );
18});
19</script>
20<div id='container'></div>

投稿2019/11/08 08:49

yambejp

総合スコア116661

こう書くかなぁ

HTML
1<body>
2  <div id="container"></div>
3
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
5  <script>
6    const data = [{
7      name: 'Aさん',
8      area: '京都',   
9    },{
10      name: 'Bさん',
11      area: '東京',   
12    }];
13
14    $('#container').append($.map(data, ({name, area}) => $(`
15      <div class="farmers">
16        <div class="info">
17          <h3 class="name">${name}</h3>
18          <p class="area">${area}</p>
19        </div>
20      </div>
21    `)));
22  </script>
23</body>

投稿2019/11/08 12:46

shinji709

総合スコア805

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5</head>
6<body>
7<div id='container'></div>
8
9<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
10<script>
11    var data = [{
12        name: 'Aさん',
13        area: '京都',
14        },{
15        name: 'Bさん',
16        area: '東京',
17    }];
18
19      $.each(data, function(i, row){
20        $('<div>').addClass('farmers')
21          .append(
22            $('<div>').addClass('info').append(
23              $('<div>').addClass('name').text(row.name)
24            ).append(
25              $('<div>').addClass('area').text(row.area)
26            )
27          )
28          .appendTo($('#container'));
29      });
30</script>
31</body>
32</html>
33