Question

我想从JSON文件创建HTML表。这减去整个第一个（标题）。需要将其作为标题添加到表格上方。

我看过其他代码，但是将整个JSON文件转换为一个表，而不将诸如title的数据和其余数据提取到表中。

我已经尝试过https://github.com/omkarkhair/jsonTable

Json Souce

[{
    "title": "info",
    "detail": {
        "total": "12",
        "new": "1",
        "handling": "0",
        "inactive": "0",
        "closed": "11"
    }
}, {
    "title": "other info",
    "detail": {
        "total": "5",
        "new": "1",
        "handling": "1",
        "inactive": "0",
        "closed": "3"
    }
}]

想要的结果：http://jsfiddle.net/zwn9cd6f/

到目前为止，我的JavaScript代码仍然无法填入表格...

<script type="text/javascript">

    var json_source = [{ "title": "info", "detail": { "total": "12", "new": "1", "handling": "0", "inactive": "0", "closed": "11" }}, { "title": "other info", "detail": { "total": "5", "new": "1", "handling": "1", "inactive": "0", "closed": $

    var options = {
        source: json_source,
        rowClass: "classy",
        callback: function(){
            alert("Table generated!");
        }
    };

    ///////////////////////////////
    // Test on a pre-existing table
        $("#dataTable").jsonTable({
                head : ['new','handling','inactive','closed'],
                json : ['new', 'handling', 'inactive','closed']
        });

        $("#dataTable").jsonTableUpdate(options);

        ///////////////////////////////
        // Test on a table not yet attached to the DOM
        var testTable = $("<table></table>");

        testTable.jsonTable({
            head : ['N.', 'new','handling','inactive','closed'],
            json : ['*', 'new','handling','inactive','closed'] // The '*' identity will be incremented at each line
        });

        testTable.jsonTableUpdate(options);

        $("#container").append(testTable);
</script>

<p>
  <h1>Title: Info</h1>
</p>
<table border=1>
  <tbody>
    <tr>
      <td>Total</td>
      <td>New</td>
      <td>Handling</td>
      <td>Inactive</td>
      <td>Closed</td>
    </tr>
    <tr>
      <td>12</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>11</td>
    </tr>
  </tbody>
</table>
<p></p>
<p>
  <h1>Title: other info</h1>
</p>
<table border=1>
  <tbody>
    <tr>
      <td>Total</td>
      <td>New</td>
      <td>Handling</td>
      <td>Inactive</td>
      <td>Closed</td>
    </tr>
    <tr>
      <td>5</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以尝试以下代码

let data = [{
            "title": "info",
            "detail": {
                "total": "12",
                "new": "1",
                "handling": "0",
                "inactive": "0",
                "closed": "11"
            }
        }, {
            "title": "other info",
            "detail": {
                "total": "5",
                "new": "1",
                "handling": "1",
                "inactive": "0",
                "closed": "3"
            }
        }]

        let main = document.querySelector('#main');
        let appendString = ''
        for (let i = 0; i < data.length; i++) {
            appendString += `<p><h1>Title:${data[i].title}</h1></p>
                <table border=1 >
                    <tbody>
                        <tr>
                            <td>Total</td>
                            <td>New</td>
                            <td>Handling</td>
                            <td>Inactive</td>
                            <td>Closed</td>
                        </tr>
                        <tr>
                            <td>${data[i].detail.total}</td>
                            <td>${data[i].detail.new}</td>
                            <td>${data[i].detail.handling}</td>
                            <td>${data[i].detail.inactive}</td>
                            <td>${data[i].detail.closed}</td>
                        </tr>
                    </tbody>
</table >`
        }
        main.innerHTML = appendString

<div id="main"></div>

Answer 2

您是否考虑过使用诸如PUG之类的模板引擎？

使用PUG，这将变得非常简单：

each t in tables
  h1=t.title
  table
    tr
      each v, h in t.detail
        th=h
    tr
      each v in t.detail
        td=v

假定一个模型，例如：

{
    tables: [
        {
            "title": "info",
            "detail": {
                "total": "12",
                "new": "1",
                "handling": "0",
                "inactive": "0",
                "closed": "11"
            }
        }, {
            "title": "other info",
            "detail": {
                "total": "5",
                "new": "1",
                "handling": "1",
                "inactive": "0",
                "closed": "3"
            }
        }
    ],
}

Answer 3

假设您确实要使用本机javascript，而不要使用jQuery之类的任何javascript工具包/框架，则可以执行以下操作：

<html>
<head>
</head>
<body>
    <script type="text/javascript">
        var jsondata = [{
            "title": "info",
            "detail": {
                "total": "12",
                "new": "1",
                "handling": "0",
                "inactive": "0",
                "closed": "11"
                }
            }, {
            "title": "other info",
            "detail": {
                "total": "5",
                "new": "1",
                "handling": "1",
                "inactive": "0",
                "closed": "3"
                }
            }];

        for (var jsonitem of jsondata) {
            document.write('<p><h1>Title: ' + jsonitem.title + '</h1></p>');
            document.write('<table border=1><tbody>');
            document.write('<tr><td>Total</td><td>New</td><td>Handling</td><td>Inactive</td><td>Closed</td></tr>');

            document.write('<tr><td>' + jsonitem.detail.total + '</td>' +
                                       '<td>' + jsonitem.detail.new + '</td>' +
                                       '<td>' + jsonitem.detail.handling + '</td>' + 
                                       '<td>' + jsonitem.detail.inactive + '</td>' + 
                                       '<td>' + jsonitem.detail.closed +'</td><tr>');
            document.write('</tbody></table>');
        } 
    </script>
</body>
</html>

上面的代码是一个概念证明，您可以自行修改，以便根据您希望显示的内容进行操作。

JSON转换为多个HTML Tabels

3 个答案: