Converting JSON to CSV in special format with help of Vue or JS

Question

I'm working with a JSON of the following structure:

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"
    },
    {
        "tests": [
            {
                "test_status": "Passed",
                "test_name": "test3",
                "subtests": [
                    {
                        "subtest_status": "Passed",
                        "subtest_name": "prepare"
                    },
                    {
                        "subtest_status": "Passed",
                        "subtest_name": "run"
                    },
                    {
                        "subtest_status": "Passed",
                        "subtest_name": "check"
                    }
                ],
                "full_path": "path3"
            }
        ],
        "main_name": "main_test2
    }
]

I'm trying to figure out the best way to convert it into a CSV format:

main_name,full_path,test_name,test_status,subtest_name,subtest_status,subtest_name,subtest_status,...

The wanted result for this example:

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

A quick web search I found a few Vue modules I could use but they all are quite new and I'm not sure if it is wise to depend on them. I was wondering if someone already came across with this issue and could suggest a way to achieve this CSV structure. The plan is to make a button list that the user can choose which of the CSV columns he wants to be included in his report so if possible, please show a way that I can insert if statements (for example if user chooses to show main_name). Our tool is written in Vue but we could use any JS solution. How can I achieve this goal? What is the best way to solve this problem?

You can write this w/o a library, but it's hard to guarantee that you'll get a clean CSV unless you know all the imports won't have quotes or commas embedded in them. — David Weldon, Oct 07 '19 at 15:47

score 1 · Answer 1 · answered Oct 07 '19 at 15:17

1

Simplest way is just to iterate through json and save it to list of strings separated by comma. its much more simple and reliable than searching for this simple thing library.

answered Oct 07 '19 at 15:17

Jiri Otoupal イりオトウパー

591
3
15

Is it possible to show a non-fully example so I'll get the idea? – vesii Oct 07 '19 at 22:40
Here is Example function get_allitems(var){ ret_list = [] for(item in var){ ret_list.push(item); } return ret_list.join(","); } for (var key in p) { if (p.hasOwnProperty(key)) { console.log(key+","+get_allitems(var)); } } – Jiri Otoupal イりオトウパー Oct 08 '19 at 09:03

score 1 · Answer 2 · answered Aug 18 '21 at 16:44

1

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

Try this vue json plugin.

<download-csv
    class   = "btn btn-default"
    :data   = "json_data"
    name    = "filename.csv">

    Downloads CSV (This is a slot)

</download-csv>

answered Aug 18 '21 at 16:44

SPrabhakaran

31
2

score 0 · Answer 3 · answered Oct 08 '19 at 09:21

I think Vue is not need here. With just a transformation from object to an array of arrays with the needed structure would be enough.

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;
}

After that you just need to join by commas every array, and all of them with \n

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

As in here https://jsfiddle.net/Scipion/gjexf6z1/

Finally to save it you can use the solution used here: JavaScript: Create and save file

Converting JSON to CSV in special format with help of Vue or JS

3 Answers3