ボタンが押された時、ajaxを使って必要な情報を表示させたい。

やりたいこと
それぞれの項目のボタンがクリックされた時、その情報に合う商品をservice.jsonから持ってきてhtml上に表示させたい。
表示したいもの
商品名、写真、値段、原産地

わからないこと
１、商品を全て表示させることはできたのですが、この商品のボタンが押されたら指定した商品のみ表示させる処理が
わかりません。
２、その情報がproductsの中に入っており、複数の商品があった場合、それぞれの商品を表示させるのにどのように打てばいいのかわかりません。

それぞれ勉強させてください。
お願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4  	<meta charset="UTF-8">
5  	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  	<title>Portfolio</title>
7  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
8  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
9  	<link rel="stylesheet" href="./dist/css/app.css">
10	</head>
11<body>
12	<div class="products block">
13		<h2 class="section-header">
14			<span>製品</span>
15		</h2>
16		<form class="refine-search-form fs-18">
17			<input type="hidden" name="mode" value="json" class="target">
18				<input type="hidden" name="disp_number" value="1000" class="target">
19				<input type="checkbox" value="candy" class="target">
20				<label for="category_id34">インフルブロックのど飴</label>
21				<input type="checkbox" value="pastry" class="target">
22				<label for="category_id32">菓子</label>
23				<input type="checkbox" value="juice" class="target">
24				<label for="category_id31">ジュース・飲料</label>
25				<input type="checkbox" value="seasoning" class="target">
26				<label for="category_id30">調味料</label>
27				<input type="checkbox" value="vegetables" class="target">
28				<label for="category_id29">野菜・果物</label>
29				<input type="checkbox" value="fish" class="target">
30				<label for="category_id28">鮮魚・海産物</label>
31				<input type="checkbox" value="meat" class="target">
32				<label for="category_id27">牛肉・豚肉・鶏肉他</label>
33				<input type="checkbox" value="food" class="target">
34				<label for="category_id8">食品</label>
35				<input type="checkbox" value="otherwise" class="target">
36				<label for="category_id33">その他</label>
37		</form>
38				<div class="block-body">
39					<ul class="refine-seach list">
40					</ul>
41				</div>
42	</div>
43	<script
44  src="https://code.jquery.com/jquery-3.3.1.min.js"
45  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
46  crossorigin="anonymous"></script>
47	<script>
48
49		$(function() {
50			function getProductsList() {
51	    	$.ajax({
52	    		url: './service.json',
53	    		method: 'get'
54	    	})
55	    	.then(shapingData);
56	    }
57
58	    	function shapingData(data) {
59	    	// console.log('data => ', data);
60	    	// console.log('data.products => ', data.products);
61	    	data.products.forEach(function(item) {
62	    		// console.log('item => ', item);
63	    		// console.log(item.papc2.value);
64
65	    		var template =
66	    			'<li class="drops">' +
67	    				'<a href="' + '" >' +
68	    				'<img src="https://milmeal.com/upload/save_image/' + item.main_image + '" class="product-image">' +
69	    					'<div class="make">' +
70	    						'<div class="fs-12">' + item.name + item.papc1.value + item.papc2.value +'</div>' +
71	    						'<div class="fc-red fs-14 text-right"> 販売価格(税込)' + item.price02_max_inctax + '円' + '</div>' +
72	    					'</div>' +
73	    				'</a>' +
74	    			'</li>';
75
76	    		$('.refine-seach').prepend(template);
77				});
78	    	};
79
80			 		getProductsList();
81
82					var candyArray = [10,11];
83
84					$('.refine-search-form input').change(function() {
85						$('.refine-seach').empty();
86							var inputValue = $(this).val();
87							console.log(inputValue);
88
89					if(inputValue == 'candy') {
90						var candyResult = candyArray.map(function(value){
91							return value;
92							// value index array
93						});
94						console.log(candyResult);
95						} else if (inputValue == 'pastry') {
96						// console.log('this is pastry');
97						} else if (inputValue == 'juice') {
98						// console.log('this is juice');
99						} else if (inputValue == 'seasoning') {
100						// console.log('this is seasoning');
101						} else if (inputValue == 'vegetables') {
102						// console.log('this is vegetables');
103						} else if (inputValue == 'fish') {
104						// console.log('this is fish');
105						} else if(inputValue == 'meat') {
106							// console.log('this is meat');
107						} else if (inputValue == 'food') {
108						// console.log('this is food');
109						} else if (inputValue == 'otherwise') {
110						// console.log('this is otherwise');
111						};
112					});
113		});
114	</script>
115</body>
116</html>

service.json

json
1{
2	"products": [
3		{
4			"product_id": "11",
5			"name": "インフルブロックのどあめ ブルーベリー味",
6			"main_image": "11020721_56369067217cb.jpg",
7			"price02_max_inctax": 2700,
8			"papc1": {
9				"value": "東京都",
10			},
11			"papc2": {
12				"value": "常温",
13			}
14		},
15		{
16			"product_id": "10",
17			"name": "インフルブロックのどあめ オレンジ味",
18			"main_image": "11020719_56368ffecf8e8.jpg",
19			"price02_max_inctax": 2700,
20			"papc1": {
21				"value": "東京都",
22			},
23			"papc2": {
24				"value": "常温",
25			}
26		},
27	]
28}
29

m.ts10806

2018/09/25 10:32

コードをすべて読み込めていないからかもしれませんが、「商品のボタン」に該当するコードがどこか分かりませんでした。どのような形でボタンを押させる想定ですか？

Anfanger

2018/09/25 10:36

失礼しました。inputタグです。checkboxでクリックします。

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

回答2件

service.jsonのフォーマットを変更することは可能ですか？

products配列をcandy配列やpastry配列など、カテゴリごとの配列を作って、
ページでクリックされたカテゴリの配列を取得するのが一番簡単そうですが。

もしくはservice.jsonをcandyやpastryなどカテゴリごとに作って、
ページでクリックされたカテゴリのjsonを取得するかですかね。

productの中身にカテゴリを入れてループ内でチェックするのもアリですが、
数が多くなると上記より速度が遅くなると思います。

カテゴリや商品が不変(今後も変わらない)であれば、最悪HTMLにハードコーディング
でもいいかと思います。

投稿2018/09/26 00:32

tabuu

総合スコア2449

ベストアンサー

まず

商品を全て表示させることはできた

いまのままだとエラーになりますね
要素をカンマ終わりにしている箇所がいくつか見受けられます。
jsonが正しい形式ではありません。

その上で$.ajaxのdataTypeを'json'にして呼び出してください
なおデバッグの際にはかならず$.ajaxにはfailをつけて処理すること

ajax
1  function getProductsList() {
2    $.ajax({
3    url: './service.json',
4    method: 'get',
5    dataType:'json',
6    }).done((data)=>{
7      //shapingData(data);
8      console.log(data);
9    }).fail((xhr,err)=>{
10      console.log(err);
11    });
12  }