使用JSON API響應顯示來自jQuery的文本

Question

我正在嘗試顯示來自json格式的api響應的文本。 我只需要新鮮的循環，盡管所有的“名稱”，“電子郵件”和數字值。 類似於姓名：John電子郵件：test@gmail.com號碼：998755000

但是使用下面的代碼我得到了未定義的錯誤，如這張圖片

API的Json回應

[{"id":"1","name":"John","email":"test@gmail.com","numbers":"998755000"},{"id":"6","name":"Larry","email":"test@gmail.com","numbers":"5554888700"}]

jQuery代碼以顯示文本

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#driver").click(function(event){
               $.getJSON('api.php', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Email : ' + jd.email+ '</p>');
                  $('#stage').append('<p> Number: ' + jd.number+ '</p>');
               });
            });

         });
      </script>
   </head>

   <body>
      <p>Click on the button to load api.php file result:</p>
      <div id = "stage" style = "background-color:#cc0;">
         STAGE
      </div>
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Answer 1

由於您的請求返回了json對象數組。 您需要使用forEach迭代結果。

     $("#driver").click(function(event){
           $.getJSON('api.php', function(data) {
              data.forEach(function(jd) {
                $('#stage').append('<p> Name: ' + jd.name + '</p>');
                $('#stage').append('<p>Email : ' + jd.email+ '</p>');
                $('#stage').append('<p> Number: ' + jd.number+ '</p>');
              });
           });
        });

Answer 2

 $(document).ready(function() { $("#driver").click(function(event){ $.getJSON('api.php', function(data) { var newHTML = ''; if (data && data.push) { //exists and it is an array newHTML = data.map(function(jd){ return '<p> Name: '+ jd.name +'</p>'+ '<p>Email : '+ jd.email +'</p>'+ '<p> Number: '+ jd.numbers +'</p>'; }).join(''); } $('#stage').html(newHTML); }); }); });

使用map，我們可以遍歷結果並生成所需的標記。 首先，這樣做使我們可以在舞台上執行單個html（），因此僅發生一次頁面重繪，從而提高了每個段落的重繪性能。

Answer 3

這是因為api返回一個數組。

$('#driver').click(function(event) {
  $.getJSON('api.php', function(jd) {

    console.log(jd); // add this and check your browser's console

    $('#stage').html('<p> Name: ' + jd.name + '</p>');
    $('#stage').append('<p>Email : ' + jd.email + '</p>');
    $('#stage').append('<p> Number: ' + jd.number + '</p>');
  });
});

Answer 4

看來您正在接收json數組。 您需要遍歷數組，這是一個基本示例。

jd.map(function(item, i){
 $('#stage').html('<p> Name: ' + item.name + '</p>');
                  $('#stage').append('<p>Email : ' + item.email+ '</p>');
                  $('#stage').append('<p> Number: ' + item.number+ '</p>');

});

這是地圖功能的更詳細描述https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control

使用JSON API響應顯示來自jQuery的文本

問題描述

4 個解決方案

解決方案1
2 2017-05-23 18:18:55

解決方案2
2 已采納 2017-05-23 18:29:33

解決方案3
0 2017-05-23 18:18:49

解決方案4
0 2017-05-23 18:18:55

使用JSON API響應顯示來自jQuery的文本

問題描述

4 個解決方案

解決方案1 2 2017-05-23 18:18:55

解決方案2 2 已采納 2017-05-23 18:29:33

解決方案3 0 2017-05-23 18:18:49

解決方案4 0 2017-05-23 18:18:55

解決方案1
2 2017-05-23 18:18:55

解決方案2
2 已采納 2017-05-23 18:29:33

解決方案3
0 2017-05-23 18:18:49

解決方案4
0 2017-05-23 18:18:55