iT邦幫忙

0

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

  • 分享至 

  • xImage

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

  <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 的方式 不太懂就是.../images/emoticon/emoticon06.gif

<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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
Ks
iT邦新手 3 級 ‧ 2019-06-11 17:58:08
最佳解答

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

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

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

/images/emoticon/emoticon01.gif

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);
  });
小魚 iT邦大師 1 級 ‧ 2019-06-11 18:12:06 檢舉

我感覺他好像是到處抄程式碼,
然後湊在一起變成四不像...

Ks iT邦新手 3 級 ‧ 2019-06-11 18:18:21 檢舉

感覺上是這樣沒錯XD,
應該是json如何取資料和js插入tbody的合併版本

/images/emoticon/emoticon03.gif

小魚 iT邦大師 1 級 ‧ 2019-06-11 18:25:33 檢舉

是沒錯,
短短8行Code,
出現3個平行宇宙...

0
小魚
iT邦大師 1 級 ‧ 2019-06-11 17:59:48

你的appendTo跟你的item有什麼關係?
而且是不是要把table先清空?

我要發表回答

立即登入回答