使用格式将树结构表导出到csv

Question

我的html表中有一个嵌套的多级树结构

 Parent 
    --- Child1
           ----Parent
                   ---- Child
   - Child

SampleJSON：

我需要使用Name字段的树结构将上述数据导出到CSV，我在CSV图像上附加了如何使用列标题提取此数据的信息。例如，如果我在json中有5级深度，我希望前5列作为Name，第6列作为Status和第7列Country，所有数据都与列标题内联显示

[！[预期输出] [1]] [1]

[要导出的最终CSV] [1]

Answer 1

您可以使用递归来确定结构的最大深度，然后使用第二个递归函数来构建结果，并用逗号分隔的单元格填充每一行。用换行符将数组连接起来会产生一个CSV字符串。

话虽如此，您介绍的结构不是实际的树，也不是“ JSON”对象，因为外部数组中可能有多个根。如果您要传递{id: 0, name: "", children: [ ... ]}作为最外面的（根）元素，那么您正在处理一棵真实的树，则需要稍微调整此处显示的功能以进行处理（在当前节点上工作，然后根据需要递归子对象。

我还继续在每个字段周围加了引号，以防您有时在数据中使用逗号。

const data = [ { "id": "692953339134475108", "entityID": "5000231121", "Name": "*Test1", "status": "Active", "date": "-", "country": "IND", "children": [ { "id": "699554426559363304", "parentId": "692953339134475108", "Name": "Testing 1", "entityID": "1416474126", "hierarchyId": "699154426559445604", "status": "Active", "date": "-", "country": "IND" }, { "id": "697253339134484008", "parentId": "692953339134475108", "Name": "*Test 2", "entityID": "1398417635", "hierarchyId": "697553339134529808", "status": "Active", "date": "-", "country": "IND" }, { "id": "696253339134488908", "parentId": "692953339134475108", "Name": "Not Available", "entityID": "Not Available", "hierarchyId": "694653339134506008", "status": "Not Available", "date": "Not Available", "country": "Not Available" },{ "id": "691453339134493608", "parentId": "692953339134475108", "Name": "*Test 3", "entityID": "1387487096", "hierarchyId": "691653339134511008", "status": "Active", "date": "-", "country": "IND" }, { "id": "697053339134483308", "parentId": "692953339134475108", "Name": "*TEst 5", "entityID": "1396529024", "hierarchyId": "694053339134516108", "status": "Active", "date": "-", "country": "IND" }, { "id": "698653339134491308", "parentId": "692953339134475108", "Name": "*test 6", "entityID": "1396474242", "hierarchyId": "695553339134503808", "status": "Active", "date": "-", "country": "IND" }, { "id": "692053339134490708", "parentId": "692953339134475108", "Name": "*test 7", "entityID": "1396505159", "hierarchyId": "699853339134497808", "status": "Active", "date": "-", "country": "IND" }, { "id": "691054426559395204", "parentId": "692953339134475108", "Name": "*atest 8", "entityID": "1416469729", "hierarchyId": "696954426559401304", "status": "Active", "date": "-", "country": "IND" }, { "id": "696353339134489808", "parentId": "692953339134475108", "Name": "*TWSTTTT", "entityID": "1396474493", "hierarchyId": "693853339134524908", "status": "Active", "date": "-", "country": "IND" }, 
{ "id": "697454426559390004", "parentId": "692953339134475108", "Name": "*test9", "entityID": "1376584880", "hierarchyId": "698054426559423304", "status": "Active", "date": "-", "country": "IND", "children": [ { "id": "698653991889575501", "parentId": "697454426559390004", "directPercent": "10", "totalPercent": "50", "Name": "Not Available", "entityID": "Not Available", "hierarchyId": "694453991889580001", "status": "Not Available", "date": "Not Available", "country": "Not Available" } ] }, { "id": "693653339134492808", "parentId": "692953339134475108", "Name": "Not Available", "entityID": "1376584880", "hierarchyId": "691153339134501508", "status": "Not Available", "date": "Not Available", "country": "Not Available" }, { "id": "696154426559394204", "parentId": "692953339134475108", "Name": "*THE TEST", "entityID": "1416583295", "hierarchyId": "698854426559467404", "status": "Active", "date": "-", "country": "IND" }, { "id": "692153339134481408", "parentId": "692953339134475108", "Name": "*TESTT", "entityID": "1396477303", "hierarchyId": "691053339134522808", "status": "Active", "date": "-", "country": "IND" }, { "id": "694553339134485108", "parentId": "692953339134475108", "Name": "*TEDTTTETETE", "entityID": "1392671953", "hierarchyId": "698853339134513508", "status": "Active", "date": "-", "country": "IND" }, { "id": "696953339134492208", "parentId": "692953339134475108", "Name": "*TESSRTTT", "entityID": "1387487096", "hierarchyId": "696153339134518708", "status": "Active", "date": "-", "country": "IND" } ] } ];

const depth = (a, d=0) => {
  let deepest = d;
  
  for (const node of a) {
    if (node.children) {
      deepest = Math.max(deepest, depth(node.children, d + 1));
    }
  }
  
  return deepest;
};

const dataToCSV = (a, res, maxDepth, depth=0) => {
  for (const node of a) {
    const row = Array(maxDepth + 1).fill("")
      .concat([node.status, node.country])
    ;
    row[depth] = node.Name;
    res.push(row);
    
    if (node.children) {
      dataToCSV(node.children, res, maxDepth, 1 + depth);
    }
  }
  
  return res;
};

const body = dataToCSV(data, [], depth(data));
const headers = Array(body[0].length)
  .fill("\"Name\"")
  .concat(["\"status\"", "\"Country\""])
  .slice(2)
  .join(",") + "\n"
;
const csv = headers + body.map(
  e => e.map(cell => `"${cell}"`).join(",")
).join("\n");

console.log(csv);

电子表格预览器中的结果CSV字符串：