使用数据表显示json文件数据

我尝试了许多堆栈溢出中可用的解决方案,但任何单一的解决方案对我都没有用。这是我现在仍在尝试的代码。

HTML

<table id="example1" class="table table-bordered">
<thead>
   <tr>
     <th>Key</th>
     <th>Value</th>
   </tr>
</thead>
<tbody></tbody>
</table>

Json文件数据

{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    ....
}

数据表代码

var table;
$(function () {     
    table = $('#example1').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax" : {
                "url" : "../apps/language/fr/fr.json",
                "dataSrc" : function (json) {
                    console.log(json ? json.length : 'json_data is null or undefined');

                    $.each(json, function( index, value ) {
                        
                        //console.log(index + "^_^" + value)
                        var html = "<tr>";
                            html += "<td>" + index + "</td>";
                            html += "<td>" + value + "</td>";
                            html += "<td><a href='javascript:void(0);' class='btn btn-sm btn-primary waves-effect waves-light edit'>EDIT</a></td>";
                            html += "</tr>";
                        var row = $(html);
                        $("#example1 tbody").append(row);
                    });
                }
            }
        });
});

你能帮我哪里错了吗?我需要带分页的表格格式的数据。与数据表相同。我已经加载了数据库。在使用这段代码时,我在js中也遇到了长度错误。Uncathed TypeError:无法读取未定义的属性'length'