借助 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,Passed

main_test1,path2,test2,Failed,echo,Passed,exec,Passed,check,Failed

main_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&nbsp; &nbsp; class&nbsp; &nbsp;= "btn btn-default"&nbsp; &nbsp; :data&nbsp; &nbsp;= "json_data"&nbsp; &nbsp; name&nbsp; &nbsp; = "filename.csv">&nbsp; &nbsp; Downloads CSV (This is a slot)</download-csv>

Answer 3

我认为这里不需要 Vue。只需将对象转换为具有所需结构的数组就足够了。function parse(d){&nbsp; let arr=[];&nbsp; d.forEach(maintest => {&nbsp; &nbsp; maintest.tests.forEach(test => {&nbsp; &nbsp; &nbsp; arr.push([&nbsp; &nbsp; &nbsp; &nbsp; maintest.main_name,&nbsp; &nbsp; &nbsp; &nbsp; test.full_path,&nbsp; &nbsp; &nbsp; &nbsp; test.test_name,&nbsp; &nbsp; &nbsp; &nbsp; ...test.subtests.reduce(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (acc, sub) => [...acc, sub.subtest_status, sub.subtest_name],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; []&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; });&nbsp; });&nbsp; return arr;}之后你只需要用逗号连接每个数组，所有的数组都用 \nparse(data).map(line => line.join(',')).join('\n');在这里https://jsfiddle.net/Scipion/gjexf6z1/