从 json (JSON.stringify(res[0]) ) 创建表 - 以字符串形式输出 - 应转换为 html 中的表

Posted 2023-05-09

【中文标题】从 json (JSON.stringify(res[0]) ) 创建表 - 以字符串形式输出 - 应转换为 html 中的表

【英文标题】：Create a table from json (JSON.stringify(res[0]) ) - output in a string - should be transformed to a table in html

【发布时间】：2020-07-19 07:49:04

【问题描述】：

我需要从 JSON 创建一个表格，我正在以字符串形式输出，它应该以 html 表格格式打印

function apicall()

        var id = document.getElementById('idval').value;


        var url1 = '**********************';
        var token = sessionStorage.getItem('MyUniqueUserToken');
        var data1 = "ip":id;
        var success = ;
        var dataType = ;

        $.ajax(
        url: url1,
        data: data1,
        type: "GET",
        beforeSend: function(xhr)xhr.setRequestHeader('Authorization', 'token '+token);,
        success: function(res)  

            document.getElementById('output').innerHTML =JSON.stringify(res[0]);
                               

  );

enter image description here

【问题讨论】：

如果您可以分享 API 调用的示例响应，将会更有帮助。表格中的结果应该如何格式化？

你不能只设置一个元素的innerHTML，除非内容已经被格式化为一个表格，否则你必须解析它。

现在数据显示在数据转储中，就像组合表单中的所有数据一样，我需要将这些数据显示在特定的表格形成器中，例如用户ID在一列中的行和列和值另一列。

@ManojDeshmukh 能否请console.log(res) 并在此处复制粘贴输出？

【参考方案1】：

猜测 res 是 JSON 格式的响应，而不是

 document.getElementById('output').innerHTML =JSON.stringify(res[0]);

您必须将您的响应放入一个循环中（假设您有一个空表，其中包含 cells=fields output0 到 output4

        var i=0;
        response.data.forEach(function(field) 

           //here you create the table cells if there are 5 fields 
             that would be 5 cells as I do not know the structure just 
             pseudo code
             document.getElementById('output'+i).innerHTML = JSON.stringify(res[i]);
             i = i+1;
          

如果你想半动态地创建表格行，你必须有一个带有标题（页脚）行修复的表格，并且作为锚点的表格主体，你附加创建的行可能如下所示（部分伪代码）-PLAIN vanilla javascript因为我不喜欢 jquery：

  // We need a table definition for creating headers and interpreting JSON date
  var tdataRow = [
        "output0" : field.output0,
        "output1" : field.output1,
        "output2" : field.output2,
        "output3" : field.output3;
       "output4" : field.output4
                    ];
  // Then in jour ajax
  response.data.forEach(function(field)          
     var columnHeadings = Object.keys(tdataRow[0]);
     var tableRef = document.getElementById("tbody" + "my_test_table");
     var columnCount = 5; // Could be derived from number of headings
     var tableLength = tableRef.getElementsByTagName("tr").length;// we get the number of the existing table rows
 var trowID = tableLength + 1; // we append at the end of existing rows
 var tableRow = tableRef.insertRow(tindex);
 for (var j = 0; j < columnCount; j++)  /* Each column */
    var cell = tableRow.insertCell(-1);
    cell.setAttribute("id", columnHeadings[j] ); 
    var obj = tdataRow[0];
    cell.innerText = obj[columnHeadings[j]]; // we get the field names from the header
 
 tableRow.setAttribute("id", "row" + "my_test_table" + j );
 // examples how to style and use classes 
 tableRow.classList.add("table");
 tableRow.classList.add("clickable-row");
 tableRow.setAttribute("align","center");
 // if you want to catch clicks on the row
 tableRow.addEventListener("click", function()
 // do something with the row e.g. highlight/ get values etc
  
 

第二个解决方案可以转换为完全自动化/动态的解决方案，其中所有内容都是从 JSON 创建的 - 但首先是小步骤。