How to convert JSON data to XML format data and download the file in React JS

I am fetching the data from API which I am getting in JSON format, I want this data to download in XML format. This functionality will be like if anyone clicks on the button on UI the xml file will get downloaded with the data.

I have searched for some resolution over that but not able to find something firm. The following link could be useful but not know how to use that properly.

https://www.npmjs.com/package/export-from-json

Initiatives will be appreciated. Many Thanks.

That package you found is actually the solution to your problem (I actually used it myself and I can confirm it's nice). Basically, all you have to do is to call the exportFromJSON function with the right arguments and the download will start:

Sample data

  const dataForXml = [
    {
      "Name": "aaaaa",
      "Author": "aaaaaaaa",
      "Subject": "History",
      "Publication Date": 1981,
      "additional data": {
        "rating": 9.9,
        "opinion": "Nice to have"
      }
    },
    {
      "Name": "L'Ancien Régime et la Révolution",
      "Author": "Alexis de Tocqueville",
      "Subject": "History",
      "Publication Date": 1866
    },
    {
      "Name": "A Brief History of Time",
      "Author": "Stephen Hawking",
      "Subject": "Cosmology",
      "Publication Date": 1988
    },
    {
      "Name": "ooooo",
      "Author": "ooooooooo",
      "Subject": "Novel",
      "Publication Date": 1995
    }
  ];

Adjusting used fields and their tags in the file:

  const fieldsAsObjects = {
    "Name": "Name column header",
    "Author": "Author column header",
    "Subject": "Subject column header",
    "Publication Date": "Publication Date column header",
    "additional data": "additional data column header"
  };

This mapping allows you to change tags in the file. Field names are corresponding to the field names in the data, while values will be used as tags, hyphen-joined, eg <additional-data-column-header>.

Alternatively this way you can just pick fields that are supposed to be included in the file:

  const fieldsAsStrings = [
    "Name",
    "Author",
    "Subject",
    "Publication Date",
    "additional data"
  ];

And here's the closure; how to use it:

import React from "react";

import Button         from "@material-ui/core/Button";
import exportFromJSON from "export-from-json";

export default function XMLExport(props) {

  function onClick() {
    const data = props.data;   //dataForXml
    const fileName = props.fileName ? props.fileName : "exported";
    let fields = props.fields ? props.fields : [];  //fieldsAsObjects or fieldsAsStrings, empty list means "use all"
    const exportType = 'xml';
    exportFromJSON({data, fileName, fields, exportType})
  }

  return (
    <Button onClick={onClick}>
      download
    </Button>
  )

}

Output for the sample data:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE base>
<base>
  <element>
    <Name-column-header>
      aaaaa
    </Name-column-header>
    <Author-column-header>
      aaaaaaaa
    </Author-column-header>
    <Subject-column-header>
      History
    </Subject-column-header>
    <Publication-Date-column-header>
      1981
    </Publication-Date-column-header>
    <additional-data-column-header>
      <rating>
        9.9
      </rating>
      <opinion>
        Nice to have
      </opinion>
    </additional-data-column-header>
  </element>
  <element>
    <Name-column-header>
      L'Ancien Régime et la Révolution
    </Name-column-header>
    <Author-column-header>
      Alexis de Tocqueville
    </Author-column-header>
    <Subject-column-header>
      History
    </Subject-column-header>
    <Publication-Date-column-header>
      1866
    </Publication-Date-column-header>
  </element>
  <element>
    <Name-column-header>
      A Brief History of Time
    </Name-column-header>
    <Author-column-header>
      Stephen Hawking
    </Author-column-header>
    <Subject-column-header>
      Cosmology
    </Subject-column-header>
    <Publication-Date-column-header>
      1988
    </Publication-Date-column-header>
  </element>
  <element>
    <Name-column-header>
      ooooo
    </Name-column-header>
    <Author-column-header>
      ooooooooo
    </Author-column-header>
    <Subject-column-header>
      Novel
    </Subject-column-header>
    <Publication-Date-column-header>
      1995
    </Publication-Date-column-header>
  </element>
</base>

I've created this sandbox sandbox for you. Unfortunately the download itself doesn't work in the sandbox.