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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

1回答

4950閲覧

htmlからの外部ファイルの読み込みに失敗する

memu2

総合スコア16

JSON

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2018/04/14 03:41

編集2018/04/14 21:39

htmlファイルから外部ファイルに記述したjavascriptを読み込もうとすると
Uncaught SyntaxError: Unexpected token <
というエラーが出てしまい、直接html内にjavascriptを記述すると解決しました。

また、htmlファイルから、サーバー内に保存したjqueryのファイルを読み込もうとすると、
Uncaught SyntaxError: Unexpected token <
というエラーが出てしまい、サーバーにダウンロードしたファイルではなく、web上のソースから読み込むようにすると解決しました。

以上のようにすることで、jqueryが問題なく使えるようになり、javascriptも動くようになったのですが、そのjavascript内でサーバー内に保存したjsonファイルを読み込もうとすると、コンソールにはエラーメッセージは出ないのですが、読み込みに失敗しているようで、出力がされません。

これらのことを踏まえると、おそらくサーバー内の外部ファイルをhtmlから読み込む際に問題が発生し、エラーの原因になっていると考えられるのですが、全く改善方法が分かりません。
これらの原因にどなたか心当たりのある方はいらっしゃるでしょうか?

ちなみに当該htmlファイルとjquery、javascript、jsonファイルはすべて同一ディレクトリ内に置いてあります。

追記1:html

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 5 <meta charset="utf-8"> 6 <title>Info window with <code>maxWidth</code></title> 7 <style> 8 /* Always set the map height explicitly to define the size of the div 9 * element that contains the map. */ 10 #map { 11 height: 100%; 12 } 13 /* Optional: Makes the sample page fill the window. */ 14 html, body { 15 height: 100%; 16 margin: 0; 17 padding: 0; 18 } 19 </style> 20 <script src="https://maps.googleapis.com/maps/api/js?key=MY_APIKEY"> 21 </script> 22 <script> 23 function initMap(){ 24 // Map options 25 var options = { 26 zoom:5, 27 center:{lat:42.999988, lng:-71.888888} 28 }; 29 30 // Add map 31 var map = new google.maps.Map(document.getElementById('map'), options); 32} 33 34 35function loadJson_and_addMarkers(){ 36 var json = []; 37 $(function(){ 38 $.getJSON("new_data.json" , function(data) { 39 json = data; 40 }); 41 }); 42 for(var i = 0;i < json.length;i++){ 43 addMarker(json[i]); 44 } 45} 46 47 48 49 50function addMarker(json){ 51 var marker = new google.maps.Marker({ 52 positions:{lat:json.lat, lng:json.lng}, 53 map:map 54 }); 55 56 var content = '<h1>' + json.name + '</h1>'+ 57 '<div id="bodycontent">' + json.body + '</div>'; 58 59 var infowindow = new google.maps.InfoWindow({ 60 content:content 61 }); 62 63 marker.addListener('click', function(){ 64 infowindow.open(map, marker); 65 }); 66} 67 68 69 </script> 70 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 71 </script> 72 </head> 73 74 <body onload="initMap()"> 75 <div id="map"></div> 76 <form> 77 <p> 78 <input type="button" id="btn" value="make Markers" onclick="loadJson_and_addMarkers()" /> 79 </p> 80 </form> 81 </body> 82</html>

追記2:json

json

1[ 2 { 3 "body": "\u3002", 4 "lat": 35.668416, 5 "lng": 139.728201, 6 "name": "sample1", 7 }, 8 { 9 "body": "\u3002", 10 "lat": 35.868416, 11 "lng": 139.728201, 12 "name": "sample2", 13 }, 14 { 15 "body": "\u4e43\u3002", 16 "lat": 35.674565, 17 "lng": 139.71699, 18 "name": "sample3", 19 } 20]

このサイトを参考にjsonへの書き込み処理と読み込み処理を記述しました。
http://sanvarie.hatenablog.com/entry/2015/12/06/104506

追記3:
ごめんやん

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

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

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

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

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

defghi1977

2018/04/14 03:46

問題が発生した際のコードを提示して下さい.
m.ts10806

2018/04/14 03:55

閉じの</script>を書いてないとかその辺りのような気がします。ひとまず、コードを提示願います。
memu2

2018/04/14 05:40

$(function(){ $.getJSON("new_data.json" , function(data) { json = data; }); });の部分で読み込んでいます
guest

回答1

0

ベストアンサー

jQuery.getJSONの使い方そのものを間違えているように見えます.

JavaScript

1/* 2function loadJson_and_addMarkers(){ 3 var json = []; 4 $(function(){//そもそもこうしてしまうとgetJSONが呼び出されない 5 $.getJSON("new_data.json" , function(data) { 6 json = data; 7 }); 8 }); 9 //しかもJSONの取得は通常非同期で行われるため, 10 //処理を継続するのであらばコールバック関数内部に処理を記述すべき. 11 for(var i = 0;i < json.length;i++){ 12 addMarker(json[i]); 13 } 14} 15*/ 16function loadJson_and_addMarkers(){ 17 $.getJSON("new_data.json" , function() { 18 console.log("リクエスト送信"); 19 }).success(function(json){ 20 console.log(json);//JSONの中身を確認 21 for(var i = 0; i < json.length; i++){ 22 addMarker(json[i]); 23 } 24 }).error(function(req, status, err){ 25 console.log(status, err); 26 }); 27}

としたら動きませんか?→一応200が返ってきた
→JSONはsuccess内で取得する
後はJSONの中身を確認し, addMarkerに正しくデータを渡せているかを確認して下さい.
(以降はAPIの使い方の確からしさになるので, 勝手ながらこれ以上のサポートはできかねます)

参考
小粋空間:jQueryのgetJSON()でエラーをハンドリングする
http://www.koikikukan.com/archives/2012/12/11-005555.php


JSONの書式にエラーがあります. ,が多いのでJavaScriptオブジェクトへのパース時にエラーとなっています.

JSON

1[ 2 { 3 "body": "\u3002", 4 "lat": 35.668416, 5 "lng": 139.728201, 6 "name": "sample1" 7 }, 8 { 9 "body": "\u3002", 10 "lat": 35.868416, 11 "lng": 139.728201, 12 "name": "sample2" 13 }, 14 { 15 "body": "\u4e43\u3002", 16 "lat": 35.674565, 17 "lng": 139.71699, 18 "name": "sample3" 19 } 20]

parsererror SyntaxError: Unexpected token < in JSON at position 0

というもので、カンマとは関係がありません。
やはりサーバー内の外部ファイルを読み込もうとすると無条件で全てこのエラーになるんですよね...。

実際にサーバーから送られてきている(とされる)JSONをscript要素で受け, WEBブラウザの開発者ツールからどのようなテキストデータとして渡されてきているのかを確認して下さい.
これで間違ってHTMLなど送ってきているようでしたら, WEBサーバーの設定が壊れています.

HTML

1<script src="new_data.json"></script>

NOTE:いくら何でもデバッグ力が低すぎませんか?

投稿2018/04/14 05:55

編集2018/04/14 17:26
defghi1977

総合スコア4756

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

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

memu2

2018/04/14 06:17

返信ありがとうございます。 このコードに変えたところ、今まではサーバーにnew_data.jsonを読みに行きましたとのログが表示されていたのが、それさえも表示されなくなってしましました。 どうやらこの方法ではダメなようです。 パーミッションの変更など自分でもいろいろ試しているのですが…なかなかうまくいきません。
memu2

2018/04/14 06:25

どうやら写し間違いをしていたようで、教えていただいたとおりのコードにすると、 GET /posts/map/new_data.json HTTP/1.1" 200 2280 とのログはきちんと表示されました。 しかし依然としてコードは思った通りの挙動(地図へのピンの出力)をしてくれません。
defghi1977

2018/04/14 06:29

次はJSONそのものを提示して下さい. ※以降のgoogle apiの使い方そのもののアドバイスはできませんが, そこまでの処理の確からしさについては確認できると思います.
memu2

2018/04/14 07:07

console.log(json);を追加してもコンソールに何も表示されませんでした。 しかしサーバーのシェルにはgetが成功と出ています。 やはり外部ファイルの読み込みの際に、何かしらのエラーが出てしまうのかもしれません。
defghi1977

2018/04/14 07:11 編集

なんか, getJSONの使い方を間違えていたっぽいので,コードを書き直してみるね
memu2

2018/04/14 07:43

ありがとうございます。jsonファイルの一文字目が間違っているよとコンソールに表示されました。 おそらく "[" という記号が入っているのはおかしいということだと思います。 しかし参考サイトではgetJsonで”[”記号が入っていても読み取れていたので、不思議です。
defghi1977

2018/04/14 07:50

全体としてケアレスミスが折り重なって不具合部の特定に手間取りました. 慣れてからでも構わないので, 一気に全ての処理を記述するのではなく, 少しずつでもよいから正しいコードを積み重ねるように心がけて下さい.
memu2

2018/04/14 15:19

返信が遅くなりました。親身になって原因を探してくださり、本当にありがとうございます。 少しづつ解決へ向かっている気がします。 jsonファイルに格納されているnameやlatなどは、実際は100項目ほどあり、とても書ききれないので上のように4つに絞らせていただきました。 その際に後ろのカンマを削除し忘れていたようです。 なのでご指摘の方法では解決しませんでした。 出ているエラーも、 parsererror SyntaxError: Unexpected token < in JSON at position 0 というもので、カンマとは関係がありません。 やはりサーバー内の外部ファイルを読み込もうとすると無条件で全てこのエラーになるんですよね...。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問