JSONファイルを読み込めません。

オートコンプリート機能を作りたいのですがうまくいきません。
JSONデータが読み込めていないようですが、どうすれば改善されるでしょうか？
よろしくお願いします。

JSON
1{
2	"corp" : ["会社1", "会社2", "会社3", "会社4"] 
3}

JavaScript
1var comp;//顧客企業用要素取得用
2var fileName = "autocomplete.json";//JSONのファイルネーム
3var arrayData;//JSONデータを保存した配列
4
5
6$(function() {
7
8	//　 JSONデータを一次元配列として返す関数
9	function convertArray(fileName) {
10		var ary;
11		$.getJSON(fileName , function(data) {
12			ary = data.corp;
13		});
14		return ary;
15	}
16
17	//　オートコンプリート機能をセットする関数
18	function createAutcomplete(obj, arrayData) {
19		$(obj).autocomplete({
20			source: arrayData,
21			autoFocus: true,
22			delay: 500,
23			minLength: 1
24		});
25	}
26
27	//　オートコンプリート機能をセット
28	comp = $("#companyNames");
29	arrayData = convertArray(fileName);
30	createAutcomplete(comp, arrayData);
31
32});

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>オートコンプリート機能</title>
6<link type="text/css" rel="stylesheet"　href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
7<link type="text/css" rel="stylesheet"
8  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
9<script type="text/javascript"
10  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
11<script type="text/javascript"
12  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
13<script type="text/javascript" src="js/secure.js"></script>
14<script type="text/javascript" src="js/utility.js"></script>
15<script type="text/javascript">
16
17</script>
18</head>
19<body>
20    <!-- CustomerName -->
21    <input id="companyNames" class="companyNames" name="companyNames" type="search" size="20" maxlengh="50" />
22</body>
23</html>

y_waiwai

2019/04/03 06:19

読み込めない、とはどうなるんでしょうか。エラーが出るなら、エラーメッセージを提示しましょう

penginkunkun

2019/04/03 06:27

arrayData = convertArray(fileName);の下に alert(arrayData);としたところ、「undefind」が返ってきました。よろしくお願いします。

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

回答2件

ベストアンサー

.getJSON()は非同期に動くため、.done()を使って処理します。

jQuery
1    $.getJSON(fileName).done(function(data, textStatus, jqXHR) {
2        createAutcomplete(comp, data.corp);
3    });

https://api.jquery.com/jQuery.getJSON/

投稿2019/04/03 06:37

x_x

総合スコア13749

非同期処理を理解していないように見えます

javascript
1<script>
2function convertArray(fileName) {
3  var d=$.Deferred();
4  $.getJSON(fileName , function(data) {
5    d.resolve(data.corp);
6  });
7  return d.promise();
8}
9$(function () {
10  var fileName="autocomplete.json";
11  convertArray(fileName).done(function(arrayData){
12    createAutcomplete(comp, arrayData);
13  });
14});
15</script>