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

Question

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.

user_12003949 · Answer

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 .

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 (
    
  )

}

Output for the sample data:



  
    
      aaaaa
    
    
      aaaaaaaa
    
    
      History
    
    
      1981
    
    
      
        9.9
      
      
        Nice to have
      
    
  
  
    
      L'Ancien Régime et la Révolution
    
    
      Alexis de Tocqueville
    
    
      History
    
    
      1866
    
  
  
    
      A Brief History of Time
    
    
      Stephen Hawking
    
    
      Cosmology
    
    
      1988
    
  
  
    
      ooooo
    
    
      ooooooooo
    
    
      Novel
    
    
      1995

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

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

1 Answers