vue-nested-json-to-csv

vue-nested-json-to-csv

A component to allow nested JSON or nested javascript objects/arrays to be queried and exported to csv. A query result row is generated for each array element in the top-level object provided.

Getting Started

Installing

npm install vue-nested-json-to-csv

Basic Usage

The below is a basic example of using this component

<template>
  <div id="app">
  
    <vue-nested-json-to-csv
    	:fields="myFields"
        :object="myData"
        :show-table="true"
        :show-export-button="true"
    ></vue-nested-json-to-csv>
    
  </div>
</template>

<script>

  export default {
  
    data(){
    	return {
        
        	myFields: [
                {
                    alias: 'A Friendly Display Name',
                    name: 'dataObject.stringProperty'
                },
                {
                    alias: 'Another Friendly Display Name',
                    name: 'dataObject.stringArrayProperty'
                },
                {
                    alias: 'Yet Another Friendly Display Name',
                    name: 'dataObject.objectArrayProperty.stringProperty'
                },
                {
                    alias: 'Yet Again Another Friendly Display Name',
                    name: 'dataObject.objectArrayProperty.arrayProperty'
                },
              ],
            
              myData: {

                  dataObject: [
                  	{
                  		stringProperty: "string1",
                  		stringArrayProperty: [
                  			"arrayString1",
                  			"arrayString2",
                  			"arrayString3",
                  		],
                  		objectArrayProperty: [
                  			{
                  				stringProperty: "objectArrayString1",
                  				arrayProperty: [
                  					"arrayString1",
                  					"arrayString2",
                  				],
                  			},
                  			{
                  				stringProperty: "objectArrayString2",
                  			},
                  			{
                  				stringProperty: "objectArrayString3",
                  			},
                  		]
                  	},
                  	{
                  		stringProperty: "string2",
                  		stringArrayProperty: [
                  			"arrayString4",
                  			"arrayString5",
                  			"arrayString6",
                  		],
                  		objectArrayProperty: [
                  			{
                  				stringProperty: "objectArrayString4",
                  			},
                  			{
                  				stringProperty: "objectArrayString5",
                  			},
                  		]
                  	},
                  ]

              },
        
        };
    }
    
  }

</script>

The above usage would result in the below if exported to CSV.

A Friendly Display Name	Another Friendly Display Name	Another Friendly Display Name	Yet Again, Another Friendly Display Name
string1	arrayString1 | arrayString2 | arrayString3	objectArrayString1 | objectArrayString2 | objectArrayString3	arrayString1 | arrayString2
string2	arrayString4 | arrayString5 | arrayString6	objectArrayString4 | objectArrayString5

Expected Data Format

Whilst it is not necessary to export query results as a csv to utilise this component, the nature of the queries being performed and the data being returned lends itself to csv or tabular output.

Specifically, the component is designed to be used with an object such as that you might receive as the data portion of an API response, with a single property that is an array of similar objects where each element in this array corresponds to a csv or table row. Alternatively, the object provided can be an array of similar objects.

For example, following an API call, you may receive a response such as the below. The component is designed to be assigned the value of the data property of this response, or the entire response (if the latter, the component would likely be used to query the array against the data property).

{
  "current_page": 1,
  "data": [
    {
      "code": "EXAMPLE_CODE_1",
      "attributes": {
        "LOYALTY_POINTS": "288",
        "GLOB__FINANCE_OPTIONS": [
          "FINANCE_OPTION_1",
          "FINANCE_OPTION_2",
          "FINANCE_OPTION_3",
          "FINANCE_OPTION_4"
        ],
      }
    },
    {
      "code": "EXAMPLE_CODE_2",
      "attributes": {
        "LOYALTY_POINTS": "288",
        "GLOB__FINANCE_OPTIONS": [
          "FINANCE_OPTION_1",
          "FINANCE_OPTION_2",
          "FINANCE_OPTION_3",
          "FINANCE_OPTION_4"
        ],
      }
    },
    {
      "code": "EXAMPLE_CODE_3",
      "attributes": {
        "LOYALTY_POINTS": "608",
        "GLOB__FINANCE_OPTIONS": [
          "FINANCE_OPTION_1",
          "FINANCE_OPTION_2",
          "FINANCE_OPTION_3",
          "FINANCE_OPTION_4"
        ],
      }
    }
  ],
  "total": 115720
}

Props

The above usage example includes only a few of the props that can be provided to the component. A full list follows:

file-name-function

Expects: Function

Default: returns Report<ms_since_1970>.csv

A function can be provided to the component to generate the file name that is used for exported csv files. The default function returns Report<ms_since_1970>.csv. The component does not append the .csv extension to the file name returned by this function (it is done within the function itself), so it is recommended that the provided function does this.

show-export-button

Expects: Boolean

Default: false

When true, the export-button slot is rendered.

show-table

Expects: Boolean

Default: false

When true, the table slot is rendered.

json

Expects: String (JSON format)

Default: Empty string

If this prop is provided and the object prop is not, the string provided is parsed and used as the data object to be queried.

object

Expects: Object (JSON format)

Default: Empty object

If this prop is provided, this will be use as the data object to be queried regardless of the presence of the json prop.

fields

In the process of writing this section.

errors

In the process of writing this section.

concatenation-characters

In the process of writing this section.

Slots

In the process of writing this section.

Authors

• Dan Clark - email me with a question

License

This project is licensed under the MIT License - see the LICENSE file for details# New Document