在表格中正确显示json输出

Question

我有一个ajax函数，它向api发送一个get请求并检索一些JSON，我在表中显示这个json。这是我tried-

<script> 




function getInfo() { 


    $.ajax({ 
     type: "GET", 
     url: "http://example.com/", 
     contentType: "application/json; charset=utf-8", 
     crossDomain: true, 
     dataType: "json", 
     success: function (data, status, jqXHR) { 

      for (var i=0;i<data.length;i++) { 

      $("table.mytable").append("<tr><td>First Name</td><td>" + data[i].firstname + "</td></tr><tr><td>Last Name</td><td>" + data[i].lastname + 
      "</td></tr><tr><td>Queues</td><td>" + 
      data[i].skills + "</td></tr>" ); 
      } 


      alert("success"); 
     }, 

     error: function (jqXHR, status) { 
      // error handler 
      console.log(jqXHR); 
      alert('fail' + status.code); 
     } 
     }); 
    } 


</script> 

但是，HTML页面上的输出看起来像这个 -

名字John 姓史密斯 技能数学 名字Jane 姓氏Smith dummy1dummy2查看原文查看译文技能数学数学

我希望名字，姓氏和技能标题与表格中的数据一致。任何想法如何做到这一点？

Answer 1

更换您循环使用此：

$("table.mytable").html("<tr><th>First Name</th><th>Last Name</th><th>Queues</th></tr>" ); 

for (var i=0;i<data.length;i++) { 
    $("table.mytable").append("<tr><td>" + data[i].firstname + "</td><td>Last Name</td><td>" + data[i].lastname + "</td><td>" + data[i].skills + "</td></tr>" ); 
} 

整个AJAX应该是这样的：

$.ajax({ 
     type: "GET", 
     url: "http://example.com/", 
     contentType: "application/json; charset=utf-8", 
     crossDomain: true, 
     dataType: "json", 
     success: function (data, status, jqXHR) { 

      $("table.mytable").html("<tr><th>First Name</th><th>Last Name</th><th>Queues</th></tr>" ); 

    for (var i=0;i<data.length;i++) { 
     $("table.mytable").append("<tr><td>" + data[i].firstname + "</td><td>Last Name</td><td>" + data[i].lastname + "</td><td>" + data[i].skills + "</td></tr>" ); 
    } 


      alert("success"); 
     }, 

     error: function (jqXHR, status) { 
      // error handler 
      console.log(jqXHR); 
      alert('fail' + status.code); 
     } 
     });