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

如何解决使用数据表显示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);
                    });
                }
            }
        });
});

你能帮我哪里出错吗？我需要分页表格式的数据。和数据表一样。我已经加载了 databables 库。当我使用此代码时，我也在 js 中遇到长度错误。未捕获的类型错误：无法读取未定义的属性“长度”