jqeryでurlを取得し URLにマッチした場合配列でJSONデータをhtmlに書き出す

Question

jqeryでurlをlocationで取得し
URLにマッチした場合配列でJSONデータをhtmlに書き出す

URL取得し表示非表示はできたのですが、
配列と組み合わせる方法がわかりません。

■URL取得
url取得⇒hogeの場合htmlの#Area表示

■jsonデータをhtmlに書き出し
urlがhogeの場合⇒jsonからarea1のjsonデータ取得⇒htmlの#Areaにレンダリング

わかりずらく申し訳ないですが、
組み合わせる方法をアドバイスいただけませんか。
よろしくお願いします。

<script>
//url取得
var url = location.pathname;
  $(document).ready(function(){
    if(document.URL.match(url)) {
    	$('#Area').show();
    } else{
      $('#Area').hide();
    }
});
//url取得

//html書き出し
  $(function () { 
    $.ajax({
      dataType: "json",
      url: "data.json",
      success: function (data) {
        $("#Area1 div").remove();
        area = data.area;
        var areadiv = $("<div>").attr('class', 'row');
        for (i = 0; i < 3; i++) {
          areadiv.append('<div><p>' +
            "<img src=" + area[i].img + "/>" +
            area[i].name + "</p>" +
            "<p>" + area[i].tel + "</p>" +
            "<p>" + area[i].mail + "</p></div>");
        }
        areadiv.appendTo("#Area");
      }
    });
  });
//html書き出し
</script>

<div id="Area"></div>

<style>
    #Area {
      display: none;
    }

  </style>

{	
	"area1":[
		{
			"name": "hoge1",
			"tel": "03-2444-xxxx",
			"mail": "[e-mail]",
			"img" : "https://"
		},
		{
			"name": "hoge2",
			"tel": "03-4444-xxxx",
			"mail": "[e-mail]",
			"img" : "https:/"
                },
		{
			"name": "hoge3",
			"tel": "03-2222-xxxx",
			"mail": "[e-mail]",
			"img" : "https://"
		}

	],
	"area2":[
		{
			"name": "hoge4",
			"tel": "03-2444-xxxx",
			"mail": "[e-mail]",
			"img" : "http"
		},
		{
			"name": "hoge5",
			"tel": "03-4444-xxxx",
			"mail": "[e-mail]",
			"img" : "https://"
		},
		{
			"name": "hoge6",
			"tel": "03-2222-xxxx",
			"mail": "[e-mail]",
			"img" : "https://"
		}
	]

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

質問テンプレート部分の文言が多く残っています。質問内容や意図を読み取る上ではノイズにしかなりませんので、自身の質問に関係のある文章（およびソースコード）のみ残してください。

[m.ts10806]

質問編集画面ではリアルタイムでプレビューが表示されるので見ながら落ち着いて調整してください

[退会済みユーザー]

JSONのフォーマットが壊れています。ご確認の上修正願います。

[m.ts10806]

ajaxを実装するときはできればfailも実装し、エラーを明示的に拾う仕組みにされた方が良いです。　http://karashidaimyojin.com/jquery/ajax-ajax/

[kei344]

「配列と組み合わせる」とどのデータのどの部分をどうやって出力するつもりかをもう少し具体的に提示いただけませんか？

[kei344]

data.areaを3件出力するコードを書かれていますが、data.area1とかdata.area.area1とかデータ構造にあわせて処理すればよいだけでは。

Answer 1

jqeryでurlをlocationで取得

細かいようですが、location.pathnameは標準オブジェクトのプロパティなのでjQueryは関係ないと思います。
タイトルを読んで「？？？」となりました。

ソースを読むと、やりたいことは理解できましたので、es7でサクッと書いてみます。
なるべくコメントは書いたので、解説は省きます。
少し気になったのですが、<div class="row">はループの外でよかったですかね？

実際に使う場合はes5に書き直すか、babelでes5に変換してください。

	$(async()=>
	{
		/** 初期処理で非表示 */
		$(`#Area`).hide();

		/** マッチしなかった場合の後処理を定義 */
		const exit = function(){
			$(`#Area`).hide().empty();
		};
	
		/** json取得 */
		const data = await $.ajax({dataType: `json`, url: `data.json`});

		if( !!data === false ) return exit();

		/** 第一階層のキー一覧取得 */
		const keys = Object.keys(data);
	
		/** パス取得 */
		const pathname = location.pathname;
	
		/** パスと一致するキーを探す */
		const findKey = keys.find( key => pathname.includes(key) );
	
		if( !!findKey === false ) return exit();
	
		/** @type {{name:string,tel:string,mail:string,img:string}[]}} */
		const targetData = data[ findKey ];
	
		if( !!targetData === false ) return exit();
	
		/** テンプレート定義 */
		const template = {
				$row: $(`<div class="row">`),
				$item: $(`<div>
							<p class="img"><img></p>
							<p class="tel"></p>
							<p class="mail"></p>
						</div>`)
			};
	
		/** 掃除はしておく */
		$(`#Area`).empty();
	
		const $row = template.$row.clone(true);
		/** 処理開始 */
		targetData.forEach( item =>
		{
			/** テンプレートから複製してインスタンス取得 */
			const $item = template.$item.clone(true);

			/** データ投入 */
			$(`.img img`, $item).attr(`src`, item.img);
			$(`.tel`, $item).text(item.tel);
			$(`.mail`, $item).text(item.mail);

			/** $rowにぶら下げていく */
			$row.append($item);
		} );
		/** DOMに挿入 */
		$(`#Area`).append($row);
	
		/** 表示 */
		$(`#Area`).show();
	});

Comments

[Lustill]

javascript初心者なのでjqeryと一緒になってしまいました。
サクッと回答ありがとうございました。