借助 Vue 或 JS 将 JSON 转换为特殊格式的 CSV

Question

我正在使用以下结构的 JSON：data = [    {        "tests": [            {                "test_status": "Passed",                "test_name": "test1",                "subtests": [                    {                        "subtest_status": "Passed",                        "subtest_name": "echo"                    },                    {                        "subtest_status": "Passed",                        "subtest_name": "sleep"                    },                    {                        "subtest_status": "Passed",                        "subtest_name": "run"                    }                ],                "full_path": "path1"            },            {                "test_status": "Failed",                "test_name": "test2",                "subtests": [                    {                        "subtest_status": "Passed",                        "subtest_name": "echo"                    },                    {                        "subtest_status": "Passed",                        "subtest_name": "exec"                    },                    {                        "subtest_status": "Failed",                        "subtest_name": "check"                    }                ],                "full_path": "path2"            }        ],        "main_name": "main_test1"    },我试图找出将其转换为 CSV 格式的最佳方法：main_name,full_path,test_name,test_status,subtest_name,subtest_status,subtest_name,subtest_status,...这个例子想要的结果：main_test1,path1,test1,Passed,echo,Passed,sleep,Passed,run,Passedmain_test1,path2,test2,Failed,echo,Passed,exec,Passed,check,Failedmain_test2,path3,test3,Passed,prepare,Passed,run,Passed,check,Passed快速的网络搜索我发现了一些我可以使用的 Vue 模块，但它们都很新，我不确定依赖它们是否明智。我想知道是否有人已经遇到过这个问题，并且可以提出一种实现这种 CSV 结构的方法。计划是制作一个按钮列表，用户可以选择他想要包含在报告中的哪些 CSV 列，因此如果可能，请展示一种我可以插入if语句的方式（例如，如果用户选择显示main_name）。我们的工具是用 Vue 编写的，但我们可以使用任何 JS 解决方案。我怎样才能实现这个目标？解决这个问题的最佳方法是什么？

Answer 1

最简单的方法是遍历 json 并将其保存到以逗号分隔的字符串列表中。它比搜索这个简单的东西库要简单和可靠得多。

Answer 2

https://www.npmjs.com/package/vue-json-csv

试试这个 vue json 插件。

<download-csv

    class   = "btn btn-default"

    :data   = "json_data"

    name    = "filename.csv">

    Downloads CSV (This is a slot)

</download-csv>

Answer 3

我认为这里不需要 Vue。只需将对象转换为具有所需结构的数组就足够了。

function parse(d){

  let arr=[];

  d.forEach(maintest => {

    maintest.tests.forEach(test => {

      arr.push([

        maintest.main_name,

        test.full_path,

        test.test_name,

        ...test.subtests.reduce(

          (acc, sub) => [...acc, sub.subtest_status, sub.subtest_name],

          []

        )

      ]);

    });

  });

  return arr;

}

之后你只需要用逗号连接每个数组，所有的数组都用 \n

parse(data).map(line => line.join(',')).join('\n');

在这里https://jsfiddle.net/Scipion/gjexf6z1/