Блог

Я хочу создать HTML-таблицу из файла JSON. Это минус первое (заголовок) целое. Это необходимо добавить в качестве заголовка над таблицей.

Я посмотрел на другой код, но он преобразует весь файл JSON в таблицу, а не извлекает такие данные, как заголовок и остальные данные, в таблицу.

Я пробовал это с 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> 

Вы можете попробовать следующий код

 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> 

Рассматривали ли вы возможность использования какого-либо движка шаблонов, такого как 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"
            }
        }
    ],
}
 

Предполагая, что вы действительно хотите использовать собственный javascript и не использовать какие-либо инструменты / фреймворки javascript, такие как jQuery, вы можете сделать это, как показано ниже:

 <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>
 

Приведенный выше код является доказательством концепции, вам решать изменить его так, чтобы он работал в соответствии с тем, что вам нравится отображать.