Javascript 如何使转换为JSON的Excel文件自动加载到表（DataTables）中

所以我得到了这个任务，我需要将CSV文件加载到html页面， 加载后，我需要生成一个自动运行的代码- 获取对象字段名-将其放在表头中，然后将值与每个对象字段名匹配。 所有内容都需要自动完成（因为我们的老师只需添加csv文件即可进行检查-任何内容都不能硬编码）。 我们还需要使用称为数据表的库

我设法做了一些分配，但大部分是硬编码的，所以不好

这是我的html-

  <table id="table_id" class="display">
        <thead>
            <tr id="FieldNames">

            </tr>
        </thead>
        <tbody id="Values">

        </tbody>
    </table>

在这个表中，我添加了这个代码- （使用硬编码的JSON，只是为了在导入CSV文件之前看看是否可以这样做）

常量Json=
[
{
“姓名”：“约翰”，
“年龄”：35岁，
“电子邮件”：AF@asdsa.com",
“地址”：“Rishon LeZion”
},
{
“姓名”：“赫兹”，
“年龄”：31岁，
“电子邮件”：wertwree@grf.com",
“地址”：“Rishon LeZion”
},
{
“姓名”：“大卫”，
“年龄”：23岁，
“电子邮件”：wertewrt@fd.com",
“地址”：“Rishon LeZion”
},
{
“姓名”：“杰基”，
“年龄”：41岁，
“电子邮件”：wertr@aa.com",
“地址”：“Rishon LeZion”
}];
$（文档）.ready（函数（）{
var Obj=Json[0]；
var KeyNames=Object.keys（Obj）
for（设i=0；i

虽然结果很好，但这不是我要求的。

---

我正在想办法让它自动运行，但对我来说效果不太好。

好吧，我刚才做过，下面是解决方案：

我将逻辑分为两部分：

1） 创建标题：

循环遍历子对象（如数组中的对象），然后使用

Object.keys（）

这些键是你的标题。然后把它们排成一行，然后看，你的头球

2） 创建字段。这有点复杂。 在主要对象中循环，这将在循环展开时一个接一个地显示对象。然后，为每个索引创建一行。获取每个对象的值，并确保通过执行类似于我所做的

id='object-“+childIndex+”

的操作，将它们作为

td

抛出到正确的行中。然后抓取特定的行，从对象中获取

Object.values（）

后，在行内循环一个接一个地抛出它们。塔达

另外，不要问我为什么使用jquery。我使用它是因为我不是一个受虐狂，不会用纯JS来做这件事

const json=[{
“姓名”：“约翰”，
“年龄”：35岁，
“电子邮件”：AF@asdsa.com",
“地址”：“Rishon LeZion”
},
{
“姓名”：“赫兹”，
“年龄”：31岁，
“电子邮件”：wertwree@grf.com",
“地址”：“Rishon LeZion”
},
{
“姓名”：“大卫”，
“年龄”：23岁，
“电子邮件”：wertewrt@fd.com",
“地址”：“Rishon LeZion”
},
{
“姓名”：“杰基”，
“年龄”：41岁，
“电子邮件”：wertr@aa.com",
“地址”：“Rishon LeZion”
}
];
//获取标题并创建它们
常数表=$（“表”）；
常数thead=$（“thead”）；
var promiseMe=新承诺（功能（解析、拒绝）{
//首先基于对象创建标题的步骤
var createHeaders=json.forEach（（childObjects，index）=>{
const kNames=Object.key（childObjects）；
for（让kNames.entries（）的[索引，名称]{
const actualName=name.replace（/\s+/g'，）
让divId=name.replace（/\s+/g，'-'）；
let element=document.getElementById（divId）；
if（！元素）{
thead.append（“+name+”）
}
}
解析（createHeaders）；
})
})。然后（createFields（））；
函数createFields（）{
const keyNames=Object.values（json）；
keyNames.forEach（（childObject，childIndex）=>{
//为每个对象创建一行
const valArray=Object.values（childObject）；
$（“#值”）。追加（“”）
valArray.forEach（（值，索引）=>{
$（“#对象-”+childIndex）。追加（“+value+”）
})
})
}

.cell、.header名称{
边框：1px纯黑；
}

---

好的，我刚才做过，下面是解决方案：

我将逻辑分为两部分：

1） 创建标题：

循环遍历子对象（如数组中的对象），然后使用

Object.keys（）

这些键是你的标题。然后把它们排成一行，然后看，你的头球

2） 创建字段。这有点复杂。 在主要对象中循环，这将在循环展开时一个接一个地显示对象。然后，为每个索引创建一行。获取每个对象的值，并确保通过执行类似于我所做的

id='object-“+childIndex+”

的操作，将它们作为

td

抛出到正确的行中。然后抓取特定的行，从对象中获取

Object.values（）

后，在行内循环一个接一个地抛出它们。塔达

另外，不要问我为什么使用jquery。我用它是因为我不是受虐狂

const Json = 
            [
{
                "name": "john",
                "age": 35,
                "email": "AF@asdsa.com",
                "address": "Rishon LeZion"
            },
            {
                "name": "hezi",
                "age": 31,
                "email": "wertwree@grf.com",
                "address": "Rishon LeZion"

            },
            {
                "name": "david",
                "age": 23,
                "email": "wertewrt@fd.com",
                "address": "Rishon LeZion"
            },
            {
                "name": "jacky",
                "age": 41,
                "email": "wertr@aa.com",
                "address": "Rishon LeZion"
            }];



        $(document).ready(function () {
            var Obj = Json[0];
            var KeyNames = Object.keys(Obj)
            for (let i = 0; i < KeyNames.length; i++) {
                var Head = $(`<th>${KeyNames[i]}</th>`);
                $("#FieldNames").append(Head);
            }
            for (let j = 0; j < Json.length; j++) {
                var firstVal =  Json[j].name
                var secondVal = Json[j].age
                var thirdVal =  Json[j].email
                var fourthVal = Json[j].address
              var Data = `
              <tr class="middle">
                <td>${firstVal}</td>
                <td>${secondVal}</td>
                <td>${thirdVal}</td>
                <td>${fourthVal}</td>
              </tr>
              `;
              $("#Values").append(Data);
            }

            $('#table_id').DataTable();
        });