Download Json as csv File

[Youssef Bouchara]

Hello, I have a react file that looks like this:

export default class ShareFilter extends Component {

  constructor(props) {

    super(props);

    this.state = {

      error: null,

      isLoaded: false,

      shareFilterRows: []

    };

    }

  componentDidMount() {

    fetch(AJS.contextPath() + "/rest/securityrestresource/1.0/results?check=ShareFilter")

    .then((res)=>{

      if(res.ok) {

        return res.json();

      }

    }).then((res)=>{

      this.setState({

        isLoaded: true,

        shareFilterRows: res.map((row, index) => ({

          key: `row-${index}-${row.filterID}`,

          cells: [{

            key: `${row.filterID}`,

            content: row.filterID,

            },

            {

            key: `${row.author}`,

            content: row.author,

            },

            {

            key: `${row.filtername}`,

            content: row.filtername,

            },

            {

            key: `${row.jql}`,

            content: row.jql,

            },]}))

      })

      })

    }

  render() {

    const { error, isLoaded, shareFilterRows } = this.state;

    if (error) {

      return <div>Error: {error.message}</div>;

    } else if (!isLoaded) {

      return <div>Loading Shared Filters...</div>;

    } else {

      return (<Wrapper>

        <div>

        <DynamicTable

          head={shareFilterHead}

          rows={shareFilterRows}

          rowsPerPage={10}

          defaultPage={1}

          loadingSpinnerSize="large"

          isLoading={false}

          isFixedSize

          defaultSortKey="filterID"

          defaultSortOrder="ASC"

          onSort={() => console.log('onSort')}

          onSetPage={() => console.log('onSetPage')}

        

          />

      </div>

      </Wrapper>

      );

      }

  }

}

I would like to download {ShareFilterRows} and {ShareFilterHead} as a .CSV file when I click on a button. The data is in JSON, I tried many open source libraries but I couldnt get it done:

import {shareFilterHead} from "./content/share-filter";

import {shareFilterRows} from "./content/share-filter";

import { ExportToCsv } from 'export-to-csv';

AJS.$(document).on("click", "#downloadShareFilterCheck", function(){

        const csvExporter = new ExportToCsv(options);

 

        csvExporter.generateCsv({shareFilterHead}); 

    }); 

Do you have any ideas how to achieve that?

[Dave Theodore [Coyote Creek Consulting] · Accepted solution]

I'm not really following what you are trying to do, but if you are wanting to extract only certain elements from the JSON output, you can pipe it to jq and work with those elements very easily.