javascript - 将 JSON 数据以表格格式附加到 HTML div 元素

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 5 年前。

Improve this question

我有一个 JSON 格式

{
    "0": "The keys on a keyboard are only clipped on ",
    "1": " Make sure the keyboard/mouse is firmly plugged into ...",
    "2": "Try restarting your computer. Wait a few seconds and the...",
    "3": "Some string..." 
}

我想将其转换为 HTML 表格。如下图所示。转换应该在 javascript 中实现。 不是Python。

编辑:我尝试使用

附加到 html

        var result;

        $("#btn").click(function() {

            console.log($("#query").val())
        var result = $.ajax({
            type: "POST",
            url: eva_url,
            data:JSON.stringify({
                "query": $("#query").val(),
            }),  
            success: function(data) {
                console.log(data)
                $('#output').html('');
                $("#output").append(data[0]);
                $("#output").append(data[1]);
                $("#output").append(data[2]);
                $("#output").append(data[3]);

但是，字符串被连接为一个大段落，这并不是预期的。

Answer 1

你可以试试这个

$(document).ready(function() {

  var p = {
    "0": "The keys on a keyboard are only clipped on ",
    "1": " Make sure the keyboard/mouse is firmly plugged into ...",
    "2": "Try restarting your computer. Wait a few seconds and the...",
    "3": "Some string..."
  };

  for (var key in p) {
    if (p.hasOwnProperty(key)) {
      $(".toAdd").append("<tr><td class='grey'>" + key + "</td><td>" + p[key] + "</td><tr/>");
    }
  }

});

td,
th {
  border: 1px solid black;
  text-align: center;
}

.grey {
  background-color: #C0C0C0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="toAdd">
  <tr>
    <th class="grey">Column 1</th>
    <th class="grey">Column 2</th>
  <tr/>
</table>