在jQuery閱讀json文件在javascript中

我想在jquery中用jQuery文件打包json文件。什麼是我的錯，此代碼在jQuery閱讀json文件在javascript中

$(function() { 
 
    var new4 = []; 
 
    $.getJSON('new4.json', function(data) { 
 
    $.each(data.new4, function(i, f) { 
 
     var tblRow = "<tr>" + "<td>" + f.FirstName + "</td>" + 
 
      "<td>" + f.LastName + "</td>" + "<td>" + f.EmailAddress + "</td>" + "<td>" + f.City + "</td>" + "</tr>" 
 
     $(tblRow).appendTo("#userdata tbody"); 
 
     } 
 
     ss); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div class="wrapper"> 
 
    <div class="profile"> 
 
     <table id="userdata" border="2"> 
 
     <thead> 
 
      <th>FirstName</th> 
 
      <th>LastName</th> 
 
      <th>EmailAddress</th> 
 
      <th>City</th> 
 
     </thead> 
 
     <tbody> 
 

 
     </tbody> 
 
     </table> 
 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

我的JSON代碼

{ 
    "person": [ 
     { 
      "firstName": "Clark", 
      "lastName": "Kent", 
      "Email Address": "Reporter", 
      "City": 20 
     }, 
     { 
      "firstName": "Bruce", 
      "lastName": "Wayne", 
      "Email Address": "Playboy", 
      "City": 30 
     }, 
     { 
      "firstName": "Peter", 
      "lastName": "Parker", 
      "Email Address": "Photographer", 
      "City": 40 
     } 
    ] 
}

對於源，我下載一個jQuery文件fromwebsite到我的文件夾中。

我添加了這張照片，因爲源對於json非常重要，我想確定我的方法是創建一個html。

當我開始HTML沒有數據如上圖

來源

2017-03-17 Mustafa Coskun

你這次得到什麼錯誤信息？ –

其實一無所獲。 Html打開，但沒有數組或其中包含json文件。當我開始時，只顯示html文件，沒有json給出的信息。 –

如果我理解你正確地下面的代碼將解決您的問題。

請與本

$.each(data.person, function(i, f) { 
    var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
    "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>" 
    $(tblRow).appendTo('body'); 
});

var data = { 
 
    "person": [ 
 
     { 
 
      "firstName": "Clark", 
 
      "lastName": "Kent", 
 
      "Email Address": "Reporter", 
 
      "City": 20 
 
     }, 
 
     { 
 
      "firstName": "Bruce", 
 
      "lastName": "Wayne", 
 
      "Email Address": "Playboy", 
 
      "City": 30 
 
     }, 
 
     { 
 
      "firstName": "Peter", 
 
      "lastName": "Parker", 
 
      "Email Address": "Photographer", 
 
      "City": 40 
 
     } 
 
    ] 
 
} 
 

 
$.each(data.person, function(i, f) { 
 
    var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
 
    "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>" 
 
    $(tblRow).appendTo('body'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body></body>

來源

2017-03-17 07:45:00

請注意，f.EmailAddress將導致未定義。 –

@RoryMcCrossan已更新 –

假設你的AJAX請求正在改變你的。每個功能，也有你的代碼的幾個語法問題。

你有$.each()右括號
你遍歷data.new4不存在前的隨機ss。您需要遍歷data.person陣列
您使用的屬性名稱與對象中的屬性名稱不匹配。請注意，JS區分大小寫。
您需要使用括號符號才能訪問'Email Address'屬性，因爲它包含空格 - 或者更好的是仍然將其更改爲匹配其他屬性的格式，即。 emailAddress。 City也應該這樣做。
雖然不是錯誤，您不需要將字符串文字附加在一起，只需將它們放在同一個字符串中即可。

有了這些修正你的代碼應工作：

var data = { 
 
    "person": [{ 
 
     "firstName": "Clark", 
 
     "lastName": "Kent", 
 
     "Email Address": "Reporter", 
 
     "City": 20 
 
    }, { 
 
     "firstName": "Bruce", 
 
     "lastName": "Wayne", 
 
     "Email Address": "Playboy", 
 
     "City": 30 
 
    }, { 
 
     "firstName": "Peter", 
 
     "lastName": "Parker", 
 
     "Email Address": "Photographer", 
 
     "City": 40 
 
    }] 
 
} 
 

 
//$.getJSON('new4.json', function(data) { 
 
    $.each(data.person, function(i, person) { 
 
     var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>" 
 
     $(tblRow).appendTo("#userdata tbody"); 
 
    }); 
 
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="profile"> 
 
     <table id="userdata" border="2"> 
 
      <thead> 
 
       <th>FirstName</th> 
 
       <th>LastName</th> 
 
       <th>EmailAddress</th> 
 
       <th>City</th> 
 
      </thead> 
 
      <tbody> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

另外請注意，上述所有的錯誤都可以在瀏覽器中檢查控制檯被發現。這通常可以通過按F12

來源

2017-03-17 07:45:13

謝謝您的關注。這種方式工作在相同的HTML，但我會從文件夾json文件，因爲這個json文件夾將永遠更新。如果我從文件夾中取出json文件，我如何更新我的代碼。我寫了new4.json，因爲這是json文件夾中的文件。根據你的代碼我怎樣才能從外面得到json代碼。我在這裏嘗試了這些代碼。 https://jsfiddle.net/b5fr55qy/，但是當我在記事本++上使用此代碼時，它們不起作用。 –

這是您的代碼的簡化版本。我只在答案中包含數據，因爲我無法在此處發出AJAX請求。只需取消註釋$ .getJSON行。 –

在jQuery閱讀json文件在javascript中

回答

相關問題