在表格中正确显示 json 输出答案

【问题标题】：displaying json output properly in a table在表格中正确显示 json 输出
【发布时间】：2026-02-04 12:00:01
【问题描述】：

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

<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页面上的输出看起来像这样-

名字约翰姓史密斯技能数学名字简姓史密斯技能数学

我希望在表格中显示名字、姓氏和技能标题，并在下方显示数据。知道怎么做吗？

【问题讨论】：

是的，试着逻辑思考？你知道如何制作 HTML 表格吗！？
显然不是，但我确实有一些礼貌
建议：首先建立一个硬编码的HTML表格，里面有虚拟数据，如果你喜欢这个结果，可以概括它并使用JavaScript插入动态数据。我敢打赌你在 HTML 中有语法错误。
每个td 都是一个新列的开始，因此，您的第一行应该被硬编码为标题，然后只需附加您的data 信息。

标签： javascript html json

【解决方案1】：

用这个替换你的for循环：

$("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);
         }
      });

【讨论】：