2017-05-28 5 views
-1

HTMLページの要素をクリックするとこのエラーが表示されます。'length'のプロパティを読み取ることができず、なぜ私は分かりません

example.js:26 Uncaught TypeError: Cannot read property 'length' of undefined 
    at HTMLAnchorElement.<anonymous> (example.js:26) 
    at HTMLElement.dispatch (jquery-3.2.1.min.js:1623) 
    at HTMLElement.q.handle (jquery-3.2.1.min.js:1585) 
(anonymous) @ example.js:26 
dispatch @ jquery-3.2.1.min.js:1623 
q.handle @ jquery-3.2.1.min.js:1585 

ここにjavascriptの部分があります。

$(function() { //when the DOM is ready 
    var times; //declare global variable 
    $.ajax({ //set up request 
     beforeSend: function (xhr) { //before requesting data 
      if (xhr.overrideMimeType) { //if supported 
       xhr.overrideMimeType("application/json"); // set MIME to prevent errors 
      } 
     } 
    }); 
    //funciton that collect data from the json file 
    function loadTimetable() { //decalre function 
     $.getJSON('data/example.json') //try to collect json data 
      .done(function (data) { //if succesful 
       times = data; //store in variable 
      }).fail(function() { //if a problem: show message 
       $('#event').html('Sorry! we couldnt load your time table at the moment'); 
      }); 
    } 
    loadTimetable(); //call the function 

    //CLICK ON TEH EVENT TO LOAD A TIME TABLE 
    $('#content').on('click', '#event a', function (e) { //user clicks on place 
     e.preventDefault(); //prevent loading page 
     var loc = this.id.toUpperCase(); //get value of id attr 
     var newContent = ""; 
     for (var i = 0; i < times[loc].length; i++) { // loop through sessions 
      newContent += '<li><span class = "time">' + times[loc][i].time + '</span>'; 
      newContent += '<a href = "descriptions.html#'; 
      newContent += times[loc][i].title.replace(/ /g, '-') + '">'; 
      newContent += times[loc][i].title + '</a></li>'; 
     } 
     $('#sessions').html('<ul>' + newContent + '</ul>'); // Display Time 
     $('#event a.current').removeClass('current'); // update selected link 
     $(this).addClass('current'); 
     $('#details').text(''); 
    }); 

    //CLICK ON A SESSION TO LEAD THE DESCRIPTION 
    $('#content').on('click', '#sessions li a', function (e) { //click on session 
     e.preventDefault(); // prevent loading 
     var fragment = this.href; //title is in href 
     fragment = fragment.replace('#', ' #'); //Add Space before # 
     $('#details').load(fragment); //to load info 
     $('#sessions a.current').removeClass('current'); //update selected 
    }); 

    //CLICK ON PRIMARY NAVIGATION 
    $('nav a').on('click', function (e) { //click on nav 
     e.preventDefault(); //prevent loading 
     var url = this.href; //get UR: to load 
     $('nav a.current').removeClass('current'); 
     $(this).addClass('current'); 
     $('#container').remove(); //remove old 
     $('#content').load(url + ' #container').hide().fadeIn('slow'); // add new 
    }); 
}); 

私が何か間違ったことは、私が正常に動作しますが、私はちょうど私は何を把握することはできません同様のプロジェクトをオフに働いているので、私は私のプロジェクトフォルダ内の他のファイルを参照していますように、間違いなくあると思います間違っている。問題を修正するための鍵は、あなたのタイトルで投稿していなかったエラーメッセージの部分を読んでいる

+0

'times [loc]'は 'undefined'です。 –

+0

26行目のどれですか? –

+0

エラーは、 'times'変数が定義されていないことを示しています(forループで参照したとき)。あなたはどこかでそれを定義しましたか? –

答えて

4

は、プロパティ「長さ」を読み込めません未定義

このISNそれ自体、lengthプロパティに不平を言う。 times[loc]は定義されていません。したがって、timesが実際に配列であり、locがその配列の有効なインデックスとして評価されていることを確認する必要があります。

+0

事は、私のコードの始めにグローバル変数として定義されています、私は今私のポストにすべてのものを含めました。私はそれが私の.jsonファイルを読んでいないと思うし、なぜ私は確信していない。 – Adamwuh

+0

@Adamwuhあなたの変数はグローバルではありません - それは 'document.ready'関数のスコープです。しかし、AJAX呼び出しが返される前に 'times [loc]'にアクセスしようとしている可能性があります。その場合、 'times'変数はまだ初期化されていません。私は 'click'イベント割り当て関数全体を' done'コールバックに入れて、 'times'を設定した後でなければそれを使用していないことを知ります。また、 'done'ハンドラに' times'を記録して、あなたが期待する値を得ていることを確認します。 –

関連する問題