Блог

Я пытаюсь создать динамическую таблицу данных с помощью jquery и json. Я пытаюсь точно определить ключи и установить их в качестве заголовков, а затем значения в ключах в виде строк в таблице.

Пока мой код:

 <script type="text/javascript">
$('#action-button').click(function() {
   $.ajax({
      url: 'https://api.myjson.com/bins/1oaye',
      data: {
         format: 'json'
      },
      error: function() {
         $('#info').html('<p>An error has occurred</p>');
      },
      dataType: 'json',
      success: function(data) {
        // EXTRACT VALUE FOR HTML HEADER. 
        var col = [];
        for (var i = 0; i < data.length; i  ) {
            for (var key in data[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i  ) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < data.length; i  ) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j  ) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = data[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
      },
      type: 'GET'
   });
});
</script>
  

но я продолжаю получать сообщение об ошибке, которое гласит:

 (index):80 Uncaught TypeError: Cannot set property 'innerHTML' of null
  

Моя структура данных JSON

JSfiddle

Как мне создать динамическую таблицу данных только на основе возвращаемых данных json, устанавливая все, от заголовков таблицы до значений в таблице?

Я внес два изменения в ваш код, и, похоже, после этого он работает.

1) Добавлен div с идентификатором ‘showData’ после div ‘info’.

 <div id="showData">
</div>
  

2) Вложенный $(‘#action-button’).нажмите (function() в $(document) .готово (функция ().

 $(document).ready(function() {

   $('#action-button').click(function() {
        $.ajax({
            url: 'https://api.myjson.com/bins/1oaye',
            data: {
                format: 'json'
            },
            error: function() {
                $('#info').html('<p>An error has occurred</p>');
            },
            dataType: 'json',
            success: function(data) {
                // EXTRACT VALUE FOR HTML HEADER. 
                var col = [];
                for (var i = 0; i < data.length; i  ) {
                    for (var key in data[i]) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                }

                // CREATE DYNAMIC TABLE.
                var table = document.createElement("table");

                // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

                var tr = table.insertRow(-1);                   // TABLE ROW.

                for (var i = 0; i < col.length; i  ) {
                    var th = document.createElement("th");      // TABLE HEADER.
                    th.innerHTML = col[i];
                    tr.appendChild(th);
                }

                // ADD JSON DATA TO THE TABLE AS ROWS.
                for (var i = 0; i < data.length; i  ) {

                    tr = table.insertRow(-1);

                    for (var j = 0; j < col.length; j  ) {
                        var tabCell = tr.insertCell(-1);
                        tabCell.innerHTML = data[i][col[j]];
                    }
                }

                // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
                var divContainer = document.getElementById("showData");
                divContainer.innerHTML = "";
                divContainer.appendChild(table);
            },
            type: 'GET'
        });

    });

}); 
  

Ошибка говорит о том, что он ожидает div с идентификатором ‘showData’.

Во-первых, для таблицы данных вам необходимо создать статическую часть заголовка. Я делюсь своим самым простым кодом здесь.

 <div class="table-responsive" style="margin-top:20px;">
    <table id="tblPatientDiagnosed" class="table table-vcenter table-responsive table-condensed table-bordered display">
        <thead>
            <tr>
                <th class="text-center" width="20%">Consultant Id</th>
                <th class="text-center" width="30%">Consultant Name</th>
                <th class="text-center" width="30%">Patinet Name</th>
                <th class="text-center" width="20%">No. of time seen</th>
            </tr>
        </thead>            
    </table>
</div>
  

Это мой статический заголовок таблицы данных.

Теперь в функции document ready вам нужно ее инициализировать.

 var tblPatientDiagnosed = '';
$(document).ready(function() {

  tblPatientDiagnosed = $('#tblPatientDiagnosed').DataTable({
    "bPaginate": true,
    aaSorting:[],
    "processing": true,
    "sPaginationType": "full_numbers",
  });

  $("#action-button").on('click',function(){

  tblPatientDiagnosed.fnClearTable();//fisrtly clearing data-table data if exist

  $.ajax({
    type: "POST",
    cache: false,
    url: "controllers/admin/add_treatment.php",
    datatype:"json",
    data: postData,

    success: function(data) {            
        var parseData = JSON.parse(result);
        var datalength = parseData.length;
        for(var i=0; i < datalength; i  ){
            var staffId = parseData[i].consultant_id;
            var staffLength = staffId.length;
            for (var j=0;j<6-staffLength;j  ) {
                staffId = "0" staffId;
            }
            staffId = staffPrefix staffId;
            tblPatientDiagnosed.fnAddData([staffId,'data1','data2','data3']);//write the varibale or data you got from ajax
        }
    }
  }); 
});
  

fnadddata добавить строку

 <html>
<head>
<script>

    function createdynamictable(yourdata)
    {

        //the parameter must be a json data

        var parsedata = JSON.parse(yourdata)        
        var table = document.createElement("table");

        for (var i = 0; i <= parsedata.length; i  )
        {
            tr = table.insertRow(-1);

            for (var key in parsedata[0])
            {
                if (i == 0)
                {
                   //Inserting columns fields to the table
                    var trCell = tr.insertCell(-1);
                    trCell.innerHTML = key;
                }
                else
                {
                    //Inserting table values to the table
                    var trCell = tr.insertCell(-1);
                    trCell.innerHTML = parsedata[i-1][key];
                }

            };

        }


        var div = document.getElementById("showtable");
        div.innerHTML = "";
        div.appendChild(table);

    }
</script>

</head>


<body>


<div id="showtable"></div>


</body>

</html>
  

Как сгенерировать таблицу с динамическими заголовками столбцов и данными из ответа ajax JSON.

 //Javascript code

    $.ajax({
        "url": SitePath   "/Attendance/getEmployeeMonthYearlyReport",
        "data": {
            MonthYear: $("#txtEmpMonth").val()
        },
        "type": "GET",
        "dataType": "JSON"
    }).success(function (response) {
        var objData1 = JSON.parse(response);
        var myList = objData1.outdata.Table[0];
        var tableHeaders = '';
        var tableBody = '';
        $.each(myList, function (k, v) {
            tableHeaders  = "<th>"   k   "</th>";
            tableBody  = "<td>"   v   "</td>";
        });
        $("#tblid").append('<thead><tr>'   tableHeaders   '</tr></thead>');
        $("#tblid").append('<tbody><tr>'   tableBody   '</tr></tbody>');
    })
      

 @* Html code *@

<table class="table-striped table-bordered" id="tblid"  align="center" width="100%"></table>