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
– David Weldon, Commented Oct 7, 2019 at 15:47

Jiri Otoupal イりオトウパー · Accepted Answer · 2019-10-07 15:17:40Z

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 7, 2019 at 15:17

Jiri Otoupal イりオトウパー

6314 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vesii Over a year ago

Is it possible to show a non-fully example so I'll get the idea?

Jiri Otoupal イりオトウパー Over a year ago

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

SPrabhakaran · Accepted Answer · 2021-08-18 16:44:19Z

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, 2021 at 16:44

SPrabhakaran

313 bronze badges

Comments

Scipion · Accepted Answer · 2019-10-08 09:21:10Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related