JSONデータの一覧をフォームから入力した文字列で検索したい

フォームから入力した文字列と、JSONデータのkeyかValurが一致したら、一致した文字列が入っているオブジェクトの一覧を表示したいのですが、ひとまず、key（このコード内で例えると、'ネコ'と検索窓で入力すると"name": "ネコ","prefecture": "北海道",が表示されるようなことがしたいです。
もし、"name": "ネコ"がJSONデータ内に複数あれば、すべて一覧で表示したいと考えています。アドバイス頂けたら幸いです。

javascript
1<!doctype html>
2<html lang="js">
3<head>
4    <meta charset="utf-8">
5    <title>CATリスト</title>
6    <!--[if lt IE 9]>
7    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8    <![endif]-->
9    <link rel="stylesheet" href="css/form.css">
10</head>
11<body>
12    <!-- html -->
13<div class="div_cat"></div>
14
15<form name="form1" action="">
16	<input name="textBox1" type="text" value="" />
17	<input type="button" value="Exec" onclick="onButtonClick();" />
18</form>
19<hr />
20<div id="output"></div>
21<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
22<script>
23$(function(){
24	//JSONデータ
25	var cat = {"cat_info": [
26		{
27			"name": "ネコ",
28			"prefecture": "北海道",
29		},
30		{
31			"name": "ネコ2",
32			"prefecture": "秋田",
33		},
34		{
35			"name": "ネコ3",
36			"prefecture": "青森",
37		},
38	]}
39
40	//HTMLを初期化
41	$("div.cat_info").html("");
42	//HTMLを生成
43	for(var index in cat.cat_info){
44	  $('<p>'+
45		  cat.cat_info[index].name + cat.cat_info[index].prefecture +'</p>').appendTo('.div_cat');
46	}//for文終了
47	
48	//onButtonClick
49	function onButtonClick(){
50		target = document.getElementById("output");
51		target.innerText = document.forms.form1.textBox1.value;
52		//もし、検索窓に入力した文字列とidが一致したら、そのオブジェクトを（特定して）取り出したい
53		var cat_data = JSON.parse(cat.cat_info);
54		if(入力文字列 === var cat{}内のオブジェクト){
55			ブラウザに取り出したオブジェクトを表示
56			"name": "ネコ",
57			"prefecture": "北海道--",
58		}
59	}
60});
61</script>
62</body>
63</html>

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

回答1件

ベストアンサー

こんな感じでしょうか

html
1<!doctype html>
2<html lang="js">
3<head>
4    <meta charset="utf-8">
5    <title>CATリスト</title>
6    <!--[if lt IE 9]>
7    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8    <![endif]-->
9    <link rel="stylesheet" href="css/form.css">
10</head>
11<body>
12    <!-- html -->
13<div class="div_cat"></div>
14
15<form name="form1" action="">
16    <input name="textBox1" type="text" value="" />
17    <input id="exec" type="button" value="Exec"/>
18</form>
19<hr />
20<div id="output"></div>
21<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
22<script>
23$(function(){
24    //JSONデータ
25    var cat = {"cat_info": [
26        {
27            "name": "ネコ",
28            "prefecture": "北海道",
29        },
30        {
31            "name": "ネコ2",
32            "prefecture": "秋田",
33        },
34        {
35            "name": "ネコ3",
36            "prefecture": "青森",
37        },
38    ]}
39
40    //HTMLを生成
41    for(var index in cat.cat_info){
42      $('<p>'+
43          cat.cat_info[index].name + cat.cat_info[index].prefecture +'</p>').appendTo('.div_cat');
44    }//for文終了
45
46    //onButtonClick
47    $('#exec').on('click', function(){
48        var value = document.forms.form1.textBox1.value;
49        //もし、検索窓に入力した文字列とidが一致したら、そのオブジェクトを（特定して）取り出したい
50        for(var index in cat.cat_info) {
51            if(cat.cat_info[index].name == value) {
52                $('#output').append(JSON.stringify(cat.cat_info[index]));
53            }
54        }
55    });
56});
57</script>
58</body>
59</html>