来自 json、csv 的嵌套 html 列表答案

【问题标题】：nested html list from json,csv来自 json、csv 的嵌套 html 列表
【发布时间】：2015-08-26 17:16:56
【问题描述】：

我有一个类似的平面 csv 文件

name,roll,section,hh
a,1,k,34
a,1,r,5

您可以看到“名称”中有重复的数据，例如“a”。我想将这些转换为 html 嵌套列表，如下所示

|a
---------------------
   |1
   ------------------
      |k
      ---------------
            |  34
      ---------------
      |  r
      ---------------
            |  5
            ---------

所以我想我可以将它们转换为嵌套的 json 结构，然后在 html 中使用 js。

如何将此数据转换为嵌套的 json，如下所示？

{
"name":"a"
"roll":"1"
"section":["k","r"],
"hh":["34","5"]
}

}

还有其他方法可以将这些 csv 数据呈现给 html 嵌套列表吗？请帮忙。

编辑：对于 json 部分，我已将 csv 转换为 $.toJSON($.csv.toObjects(data)) 使用 js 插件。但找不到像我展示的那样制作嵌套 json 的任何方法。

【问题讨论】：

分享您的研究对每个人都有帮助。告诉我们您尝试了什么以及为什么它不能满足您的需求。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见how to ask

标签： javascript html json csv

【解决方案1】：

给定 CSV 格式的输入：

name,roll,section,hh
a,1,k,34
a,1,r,5

每一行数据代表从根到叶节点的完整路径。所以我们可以按行拆分，累加到 JSON 对象中。假设您有一个函数可以将上述 CSV 文本解析为如下标记数组：

var lines = $.csv.toArrays(csv);

lines 现在将变成一个二维字符串数组，如下所示：

[
    ['name','roll','section','hh'],
    ['a','1','k','34'],
    ['a','1','r','5']
]

忽略作为标题的第一行，遍历每一行，并累积 JSON 对象：

var people = [];
lines.slice(1).forEach(function(person){
    // Check if this person has already been added to the people list?
    if (people.filter().length>0){
        // Update the existing person in the list
        for (var p in people){
            if (people[p].name === person[0]){
                people[p].section.push(person[2]);
                people[p].section.push(person[3]);
            }
        }
    }
    else{
        // Add a new one
        people.push({
            name: person[0],
            roll: person[1],
            section: [person[2],
            hh: [person[3]]
        });
    }
});

【讨论】：