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

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

ただいまの
回答率

90.34%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,096

memu2

score 14

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

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

    キャンセル

  • m.ts10806

    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 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.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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