質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

7727閲覧

jsonの扱いについて

zoira

総合スコア11

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2018/05/09 05:00

編集2018/05/09 07:39

【初心者】
jsonをjavascriptで取得して、DOM操作をしたいです。
Jsonは正しいと思うのですが、以下のような構文エラーが出ます。

XML パースエラー: 構文エラーです。
URL: /product/item.json
行番号: 1, 列番号: 1:
item.json:1:1

ブラウザはFirefoxを使いました。
以下のパースエラーと出るのですが、jsonの間違いが見当たらないです。
それとも他のところがエラーなのでしょうか?
よろしくお願い致します。

json

item.json

1[ 2 { 3 "code": "0001", 4 "name": "EV-02", 5 "price": 1500 6 }, 7 { 8 "code": "0002", 9 "name": "NR-07", 10 "price": 2500 11 }, 12 { 13 "code": "0003", 14 "name": "WR-03", 15 "price": 3500 16 } 17] 18

htmlと、jsも載せておきますね。
html

index.html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 7 <script src="./index.js"></script> 8 </head> 9 <body> 10 <table id="dataTable"> 11 <tr> 12 <th>code</th> 13 <th>name</th> 14 <th>price</th> 15 </tr> 16 </table> 17 </body> 18</html> 19

js

index.js

1$(function(){ 2 $.getJSON("item.json", 3 function(data) { 4 for(var i=0; i<data.length; i++){ 5 $("#dataTable").append("<tr></tr>") 6 .find("tr:last") 7 .append("<td>" + data[i].code + "</td>") 8 .append("<td>" + data[i].naem + "</td>") 9 .append("<td>" + data[i].price + "</td>"); 10 } 11 } 12); 13}); 14
Lhankor_Mhy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/09 05:04

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。また、タイトルには要件「のみ」を書いて下さい。https://teratail.com/help/question-tips#questionTips3-1
Lhankor_Mhy

2018/05/09 07:49

そのJSONファイルにBOMがついていたりはしないですよね?
zoira

2018/05/09 07:55

タイトル修正しました!
zoira

2018/05/09 07:57

jsonにbomはついていないようですね。bomに注意するというのは盲点でした。ありがとうございます。
kei344

2018/05/09 08:01

サーバにアップせずにローカルで実行されていますか?
zoira

2018/05/09 08:02 編集

はい! ローカルで実行しています。
guest

回答3

0

ベストアンサー

Chromeで確認してみましたが再現しません。
(このコードでブラウザの違いはおそらくないかと)

仰るようにjsonに不具合はないっぽいですね。
(jsoncheckで確認)

nameをnaem とタイプミスしてるのでそこは修正してください。(質問者さんに起きている現象とは関係なさそうですが)

もしあれでしたら<script>記述を全て</body>の前に持ってきてみてください。
※私の環境では質問内の位置でも関係なく読み出しは成功しました。

html

1 <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 2 <script src="./index.js"></script> 3 </body> 4</html>

あと、気になるのはjsonファイルの文字コードくらいでしょうか。

投稿2018/05/09 05:21

編集2018/05/09 05:28
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/09 05:28 編集

なぜか途中で投稿されてしまって、修正しようと思ったら編集画面でエラーになってしまうのでこちらに 追記してましたが、編集できるようになったのでコメント修正。
zoira

2018/05/09 07:58

jsonファイルの文字コードはUTF-8(ボムなし)です。 mtsさんはどの文字コードでしたか?
m.ts10806

2018/05/09 08:00

同じくUTF-8です。 冒頭に改行コードや空白などが入っていたりしませんか?
m.ts10806

2018/05/09 08:03

あとChrome実行だとgetJSONなど非同期通信処理はローカルファイルに対しては使えないので、ローカルサーバ(Apache)を起動し、その配下で実行しました。
zoira

2018/05/09 08:11

冒頭は [ の一文字だけですね。 jsonにはエラーはないと思います。 こうゆうエラーが発生した時は、時間かけて解決するのと一旦置いておくのは、開発者になろうとするうえではどうすればいいのでしょうか?
m.ts10806

2018/05/09 08:18

プログラムは書いた通りにしか動きません。 何時間、何日放置しても劣化もしなければ熟成・進化もしません。 問題が発生したら基本的に即調査で即解決すべきです。 ご自身が一方向にしか考えられなくなっているというのであれば 自身のリフレッシュのために休むというのはありかとは思いますが。 念のため、私が17:03に書いた方法も試してみてください。 単なるローカルファイルで試すのではなく、ローカルサーバーで動作確認。
kei344

2018/05/09 09:16

To: mts10806さん ローカルで実行するときにmimeが正しく判定されないことがあるのでそれかと。(確かそんなことがあったはず)ローカルサーバで検証するのが正解だと思います。
m.ts10806

2018/05/10 04:40

そうですね。Chromeのエラーメッセージからするとそんな気がします。(私も同様のメッセージが出たためローカルのXAMPPに実行環境うつしました)
zoira

2018/05/10 07:22

ありがとうございます。サーバー周りの知識が何もなかったので、ローカルサーバーを立てるところから始めます。mts さんのおっしゃる通り、即調査、即解決の癖をつけていきたいと思います。
m.ts10806

2018/05/10 07:28

お使いのPCがWindowsであればXAMPP MACであればMAMPをご利用ください(MAC用XAMPPもありますが、ひとまず)
zoira

2018/05/11 03:24

ありがとうございました!MAMPでやってみます!
guest

0

解は既に出ていますが、質問者に伝わっていないようなので、補足を。

XML パースエラー: 構文エラーです。

JSONファイルと認識されていません。
jQuery.getJSON() はHTTPリクエストという通信を伴う動作をしますが、サーバが正しくJSONファイルと認識せず、XMLファイルとして扱っています(Content-Typeが不正)。
http://api.jquery.com/jquery.getjson/

はい! ローカルで実行しています。

ローカルファイルに通信という概念はありません。
応答を返すはずのサーバがないので、ブラウザが勝手に適当なファイル形式と判断し、XMLファイルとして扱われています。
解決するには、Apache 等のHTTPサーバをインストールし、http://127.0.0.1/ に対してリクエストする必要があります。

Re: zoira さん

投稿2018/05/10 04:34

編集2018/05/10 04:57
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2018/05/10 04:49

ご指摘ありがとうございます。修正しました。 > http://localhost/でも動作は確認できます。 個人的にhostsファイルを信用していなくて、IP指定でリクエストする癖が付いていました。 勿論、通常は問題ないですね。
m.ts10806

2018/05/10 04:54

> 個人的にhostsファイルを信用していなくて、IP指定でリクエストする癖が付いていました。 そうですね。若干的外れな補足をしてしまいました。失礼しました。
zoira

2018/05/10 07:52

apache設定をしない場合のサーバーってデフォルトだとどこになっているのですか?
think49

2018/05/10 09:57 編集

OSは何をお使いですか。 通常、デスクトップPCにHTTPサーバはインストールされていません。 例えば、Windows OSはサーバOSでなければ、インストールされていないと思います。
zoira

2018/05/10 14:37

osxを使っています。確認する方法などございますでしょうか?
zoira

2018/05/11 03:23

ありがとうございました!
guest

0

jquery getjson xml parsing error をキーワードにググって調べただけですが・・・

以下の記事の回答にある "because you're using a local file, so a mime type of "text/xml" is implied and hence Firefox will try to parse it as XML into .responseXML of the underlying XHR object." に心当たりはないですか?

jQuery getJSON syntax error on a valid JSON
https://stackoverflow.com/questions/18291390/jquery-getjson-syntax-error-on-a-valid-json/18292092

投稿2018/05/09 06:07

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zoira

2018/05/09 07:45

回答ありがとうございます。 記事拝見しましたが、そのような文章に心当たりはありませんね。 自分の場合のパースエラーは jsonをxmlに変換する時にエラーがおきているということでしょうか?
zoira

2018/05/09 08:01

ちなみにchromeでのエラーは以下のようでした。 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery-2.0.3.m in.js:6 chromeではセキュリティの面でlocalでajaxは使えないようですね
退会済みユーザー

退会済みユーザー

2018/05/09 09:57

> そのような文章に心当たりはありませんね。 心当たりがないというより、読んでも理解できなかったということのように思えます。kei344 さんのコメント「ローカルサーバで検証するのが正解」は読みましたか? ローカルサーバーで検証しても同様ですか?
退会済みユーザー

退会済みユーザー

2018/05/09 10:00

> chromeではセキュリティの面でlocalでajaxは使えないようですね ローカルサーバーなら何の問題もないはずです。エラーメッセージの Cross origin requests を見ると別の問題でしょう。Cross origin の意味、わかります?
zoira

2018/05/10 07:19

cross origin わかっていませんでした。勉強します。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問