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

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

ただいまの
回答率

90.53%

  • JavaScript

    16336questions

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

  • HTML

    8923questions

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

  • jQuery

    6670questions

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

  • JSON

    1146questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 520

memu2

score 10

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info window with <code>maxWidth</code></title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_APIKEY">
    </script>
    <script>
  function initMap(){
  // Map options
  var options = {
    zoom:5,
    center:{lat:42.999988, lng:-71.888888}
  };

  // Add map
  var map = new google.maps.Map(document.getElementById('map'), options);
}


function loadJson_and_addMarkers(){
  var json = [];
  $(function(){
    $.getJSON("new_data.json" , function(data) {
      json = data;
    });
  });
  for(var i = 0;i < json.length;i++){
    addMarker(json[i]);
  }
}




function addMarker(json){
  var marker = new google.maps.Marker({
    positions:{lat:json.lat, lng:json.lng},
    map:map
  });

  var content = '<h1>' + json.name + '</h1>'+
                '<div id="bodycontent">' + json.body + '</div>';

  var infowindow = new google.maps.InfoWindow({
    content:content
  });

  marker.addListener('click', function(){
    infowindow.open(map, marker);
  });
}


     </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
    </script>
  </head>

  <body onload="initMap()">
    <div id="map"></div>
    <form>
    <p>
    <input type="button" id="btn" value="make Markers" onclick="loadJson_and_addMarkers()" />
    </p>
    </form>
  </body>
</html>


追記2:json

[
    {
        "body": "\u3002",
        "lat": 35.668416,
        "lng": 139.728201,
        "name": "sample1",
    },
    {
        "body": "\u3002",
        "lat": 35.868416,
        "lng": 139.728201,
        "name": "sample2",
    },
    {
        "body": "\u4e43\u3002",
        "lat": 35.674565,
        "lng": 139.71699,
        "name": "sample3",
    }
]


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

追記3:
ごめんやん

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/04/14 12:46

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

    キャンセル

  • mts10806

    2018/04/14 12:55

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

    キャンセル

  • memu2

    2018/04/14 14:40

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

    キャンセル

回答 1

checkベストアンサー

+3

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

/*
function loadJson_and_addMarkers(){
  var json = [];
  $(function(){//そもそもこうしてしまうとgetJSONが呼び出されない
    $.getJSON("new_data.json" , function(data) {
      json = data;
    });
  });
  //しかもJSONの取得は通常非同期で行われるため, 
  //処理を継続するのであらばコールバック関数内部に処理を記述すべき.
  for(var i = 0;i < json.length;i++){
    addMarker(json[i]);
  }
}
*/
function loadJson_and_addMarkers(){
  $.getJSON("new_data.json" , function() {
    console.log("リクエスト送信");
  }).success(function(json){
    console.log(json);//JSONの中身を確認
    for(var i = 0; i < json.length; i++){
      addMarker(json[i]);
    }
  }).error(function(req, status, err){
    console.log(status, err);
  });
}

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

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


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

[
    {
        "body": "\u3002",
        "lat": 35.668416,
        "lng": 139.728201,
        "name": "sample1"
    },
    {
        "body": "\u3002",
        "lat": 35.868416,
        "lng": 139.728201,
        "name": "sample2"
    },
    {
        "body": "\u4e43\u3002",
        "lat": 35.674565,
        "lng": 139.71699,
        "name": "sample3"
    }
]

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

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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/14 15:17

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

    キャンセル

  • 2018/04/14 15:25

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

    キャンセル

  • 2018/04/14 15:29

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

    キャンセル

  • 2018/04/14 16:07

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

    キャンセル

  • 2018/04/14 16:11 編集

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

    キャンセル

  • 2018/04/14 16:43

    ありがとうございます。jsonファイルの一文字目が間違っているよとコンソールに表示されました。
    おそらく "[" という記号が入っているのはおかしいということだと思います。

    しかし参考サイトではgetJsonで”[”記号が入っていても読み取れていたので、不思議です。

    キャンセル

  • 2018/04/14 16:50

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

    キャンセル

  • 2018/04/15 00:19

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

    キャンセル

  • 2018/04/15 02:12

    だったら最初からそう書いておきなさい
    https://teratail.com/help/question-tips

    キャンセル

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16336questions

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

  • HTML

    8923questions

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

  • jQuery

    6670questions

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

  • JSON

    1146questions

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