将 json 转换为 javascript/JQuery 中的 html 表输出

debugcn 发表于 Dev

用户8954059

我使用以下函数在 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 格式。我试图实现这些帖子中的代码（解析 HTML 表的 JSON 对象，将 json 数据转换为 html 表），但我进入[object, Object]了文本区域。有没有办法将json转换为表。

在 URL 文本区域我得到

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

相反，我希望得到

在此处输入图片说明

Piyin

您应该遍历数据并以表格格式打印它。首先，确保带有 iddJson的<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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。