請問 JSON 外連資料, 怎樣使用AJAX輸出格式為 Table

ajax json

manchunsai 2019-06-11 17:28:37 ‧ 1236 瀏覽

請問 JSON資料, 怎樣使用AJAX輸出格式為 Table , 不知出錯了什麼 , 使用console.log 可以出到資料"data" , 求大神解答。

  <script>
      $.getJSON("https://api.github.com/users/hadley/orgs", function(data){

        var items= data;
        $.each(data, function(key, val){
          item += "<tr>";
          item += "<td id=''"+key+"''>"+val.id+"</td>";
          item +=  "<td id=''"+key+"''>"+val.login+"</td>";
          item += "</tr>";
        });
        
        $("tbody").appendTo("table");
      });
      </script>

用以下方式可以輸出 , 但用$.each 的方式不太懂就是...

<script>
      $.getJSON("https://api.github.com/users/hadley/orgs", function(data){
        console.log(data);

        data.forEach(i =>{
          $("#eet").append(
            "<tr><td>"+i.id+"</tr>"
          );
        });
        
      });
      </script>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

iT邦新手 3 級 ‧ 2019-06-11 17:58:08

最佳解答

$.each(data, function(key, val)
key也就是這個json的索引,val也就是這個索引對應的裡面的item

而你那段程式碼有很多讓人不解的地方,

每一段代碼都有它的用意,該好好瞭解清楚～

var items= data; << 有什麼用處

$.each(data, function(key, val){

  <<以下的item參數哪裡來,沒宣告>>
  item += "<tr>";
  item += "<td id=''"+key+"''>"+val.id+"</td>";
  item +=  "<td id=''"+key+"''>"+val.login+"</td>";
  item += "</tr>";
});

$("tbody").appendTo("table");<<只是插入一個table標頭,沒後續了

我有稍微做了一個範例,你可以參考瞭解一下

$.getJSON("https://api.github.com/users/hadley/orgs", function(data){
    var content = "<table>";
    
    $.each(data, function(key, val){
        content += "<tr id='"+ key +"'>" + 
        "<td>"+val.id+"</td>" + 
        "<td>"+val.login+"</td>" + 
        "</tr>";
    });
    
    content += "</table>";
    
    $("#id").html(content);
  });