在 javascript/JQuery 中将 json 转换为 html 表输出答案

【问题标题】：Convert json to html table output in javascript/JQuery在 javascript/JQuery 中将 json 转换为 html 表输出
【发布时间】：2017-11-17 06:23:12
【问题描述】：

我使用以下函数在 UI 上获取 JSON 输出

$("#idvar").click(function(){
  var d1 = document.getElementById("dText");
  var d2 = document.getElementById("dJson");
  var mytext = d1.textContent;
  alert(mytext);
  $.post(
    url,
    {doc: mytext},
    function(data) {
      console.log(Object.keys(data).length);
      d2.textContent = data;
    }
  );
});

其中d1 是显示上传的输入文档，d2 是在模型上处理文档生成的输出。目前，我正在获取 json 格式。我试图实现这些帖子中的代码（Parsing JSON objects for HTML table、Convert json data to a html table），但我在文本区域中得到了[object, Object]。有没有办法将 json 转换为表格。

在 URL 文本区域中，我得到了

 [{"tag":"a1","relevance":0.5},
  {"tag":"a2","relevance":0.3},
  {"tag":"c3","relevance":0.2},{"tag":"d3,
   ...

相反，我希望得到

enter image description here

【问题讨论】：

stackoverflow.com/questions/5180382/…
看看这个例子jsfiddle.net/7MRx6/338
@nikunjMnage 我在stackoverflow.com/questions/17066636/… 上尝试了这个例子，但它给出了 [object, Object] 作为显示。在函数（数据）内部，创建了“tr”变量
与我们分享返回的 JSON 的样子。您可以通过将d2.textContent = data; 更改为d2.textContent = JSON.stringify(data); 来查看它
@Piyin 我添加了'plugin json2html'，带有转换，现在我得到像<li>a1 (0.2)</li><li> a2 (0.3)</li> 使用$('#d2').html(json2html.transform(data, transform)); 其中var transform = {'<>':'li','html':'${tag} (${relevance})'}; 是否可以从输出中删除这些标签

标签： javascript jquery json

【解决方案1】：

您应该遍历数据并以表格格式打印。首先，确保 id 为 dJson 的元素是 <table> 元素。然后，您可以将 success 回调更改为：

function(data) {
  console.log(Object.keys(data).length);
  var html = '<tr><th>Tag</th><th>Relevance</th></tr>';
  for(var i=0; i<data.length; i++){
    html +=
      '<tr>' +
        '<td>' +
          data[i].tag +
        '</td>' +
        '<td>' +
          data[i].relevance +
        '</td>' +
      '</tr>'
    ;
  }
  d2.innerHTML = html;
}

这里有一个工作示例（没有$.post 调用）：https://jsfiddle.net/cLbqmwa4/

【讨论】：

<table id="dJson"></table> 不工作。所以，我将其更改为 div <div id="dJson"></div> 和 $('#dJson').html(html); 现在，它可以工作了，谢谢
您的代码中似乎有 CSS 问题，<table> 应该可以正常工作。如果您检查 JSFiddle 链接，您会看到它如何与 <table> 一起工作，但不适用于 <div>。无论如何，很高兴它对你有用，不客气