JavascriptでのJSONファイルの取得方法について

前提・実現したいこと

現在、キーワード検索をしてJSONファイルの中からキーワードが一致するものを出力するものを
作りたいと思っています。

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

しかしJSONファイルをjavascriptで取得することができません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
7   </script>
8   <script>
9     $(function(){
10       $.getJSON("item.json",
11       function(data){
12         for(var i=0; i<data.length; i++){
13           $("#dataTable").append("<tr></tr>")
14           .find("tr:last")
15           .append("<td>"+data[i].code+"</td>")
16           .append("<td>"+data[i].name+"</td>")
17           .append("<td>"+data[i].price+"</td>");
18         }
19        }
20       );
21     });
22   </script>
23  </head>
24  <body>
25    <table id="dataTable">
26      <tr>
27        <th>code</th><th>name</th><th>price</th>
28      </tr>
29    </table>
30  </body>
31</html>
32

試したこと

JSONファイルはJSON pretty LInterにかけて正しいと出ました。
htmlもミスがないか確認しました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

こちらですが、手元で確認したところ問題なく表示されました。
確認したい点ですが、表示している画面のURLは「http://」から始まっているでしょうか？
もし「file://」から始まっている場合は、クロスドメイン制約に引っかかるためJSONが読み込まれないです。
仮想サーバー等を立てる等してサーバー上でアクセスする必要があります。

念の為開発者ツールのConsoleを開いていただき、何か警告やエラー文が表示されていないか確認してみてください。

【表示される】
http://localhost/json/

【表示されない】
file:///Users/〇〇/△△/index.html

json（手元確認）
1[
2    {
3        "code": "code-1",
4        "name": "name-1",
5        "price": "price-1"
6    },
7    {
8        "code": "code-2",
9        "name": "name-2",
10        "price": "price-2"
11    },
12    {
13        "code": "code-3",
14        "name": "name-3",
15        "price": "price-3"
16    }
17]