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

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>

Answer 2

您可以尝试以下方式：

var obj = {"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..." }

var html = '<table>'

Object.entries(obj).forEach(function(v){
  html += '<tr>' + '<td>' + v[0] + '</td>' + '<td>' + v[1] + '</td>' + '</tr>'
});
html += '</table>'

document.getElementById('container').innerHTML = html

<div id="container"></div>