JSON文件似乎沒有被Jquery讀取

Question

我有一個JSON文件的數據和一個jquery腳本，它假設把這些數據放在一個列表中，但由於某種原因沒有任何東西被讀取。

下面是代碼

<div data-role="mainPage" data-theme="a"> 

<div data-role="header"> 
    <h1>My Title</h1> 
</div> 

<div data-role="content"> 
<ul data-role="listview" id="fixturesList"> 

    </ul> 
</div> 
</div> 

<script type="text/javascript"> 



$.getJSON("http://localhost/tutorials/results.json", function(matchTable){ 
//Start off with an empty list every time to get the latest from server 
$('#fixturesList').empty(); 

//add the games to be played as a list 
$.each(matchTable, function(i, match){ 
    ('#fixturesList').append(generateMatchLink(match)); 
}); 

$('#fixturesList').listview('refresh'); 

}); 


function generateMatchLink(match){ 

    //debugger 
    return '<li><a href="javascript:void(0)' 
    + '" onclick="goToMovieDetailPage(\'' 
    + match.Home +'\')">' 
    + match.Home 
    + '</a></li>'; 
} 

function goToMatchDetailPage(matchHome){ 

    //create the html template 
    var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>" 
       + matchHome + "</h1></div><div data-role='content'><img border='0' src=' 
       http://www.songho.ca/opengl/files/gl_mvc01.png' width=204 height=288></img> </div><div data-role='footer'><h4>" 
       + matchHome + "</h4></div></div>"); 

    //append the new page to the page contanier 
    matchPage.appendTo($.mobile.pageContainer); 

    //go to the newly created page 
    $.mobile.changePage(matchPage); 
} 

</script> 

這裏是JSON文件

[{"Fix":"1","Home":"Manchester United","Away":"Aston Villa","Stadium":"Old Trafford"},{"Fix":"2","Home":"Crystal Palace","Away":"Chelsea","Stadium":"Selhurst Park "},{"Fix":"3","Home":"Southampton","Away":"Newcastle United","Stadium":"The Friends Provident St Marys Stadium"},{"Fix":"4","Home":"Stoke City","Away":"Hull City","Stadium":"Britannia Stadium"},{"Fix":"5","Home":"Swansea City","Away":"Norwich City","Stadium":"Liberty Stadium"},{"Fix":"6","Home":"West Bromwich Albion","Away":"Cardiff City","Stadium":"The Hawthorns"},{"Fix":"7","Home":"Arsenal","Away":"Manchester City","Stadium":"Emirates Stadium"},{"Fix":"8","Home":"Fulham","Away":"Everton","Stadium":"Craven Cottage"},{"Fix":"9","Home":"Liverpool","Away":"Tottenham Hotspur","Stadium":"Anfield"}] 

有缺什麼，我忽略了？

Answer 1

('#fixturesList').append(generateMatchLink(match)); 

應該

$('#fixturesList').append(generateMatchLink(match)); 

還有第二個問題，也是，或許是由於複製/粘貼：

var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>" 
      + matchHome + "</h1></div><div data-role='content'><img border='0' src=' 
      http://www.songho.ca/opengl/files/gl_mvc01.png' width=204 height=288></img> </div><div data-role='footer'><h4>" 
      + matchHome + "</h4></div></div>"); 

的JavaScript字符串不能包含換行符。修正如下：

var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>" 
      + matchHome + "</h1></div><div data-role='content'><img border='0' src='http://www.songho.ca/opengl/files/gl_mvc01.png' width=204 height=288></img> </div><div data-role='footer'><h4>" 
      + matchHome + "</h4></div></div>"); 

Answer 2

你缺少在這一行$('#fixturesList').append(generateMatchLink(match));將其更改爲，

$.each(data, function(i, match){ 
$('#fixturesList').append(generateMatchLink(match)); 
}); 

另外，儘量使用相對URL用於獲取JSON ..

Answer 3

中移動的$（document）的內部腳本.ready（function（）{}）。該dom尚未準備好，否則添加內容。

http://api.jquery.com/ready/