reactjsxml-parsing

How to read xml file(data.xml) in React js?


I tried read xml file and parse it with react-xml-parser library.

 var XMLParser = require('react-xml-parser');
 var xml = new XMLParser().parseFromString(xml_string);
 console.log(xml);
 console.log(xml.getElementsByTagName('Row'));

Here, it should read from string, but I need get it from file. My xml file is located in directory: xmldata/list.xml, so I don't now how to do that.


tried this code:

import XMLData from '../../xmldata/list.xml';
function ReadData() {
          var jsonDataFromXml = new XMLParser().parseFromString(XMLData);
          console.log(jsonDataFromXml);
          console.log(jsonDataFromXml.getElementsByTagName('Row'));

        }
    }
}

structure folder

-src
   |—views
        |—AdminScreen
               |—AdminScreen.js <-here used list.xml
   |—xmldata
           |—list.xml 

but result is:

bundle.js:81 Uncaught TypeError: Cannot set property 'value' of undefined
    at bundle.js:81
    at Array.map (<anonymous>)
    at e.value (bundle.js:76)
    at e.value (bundle.js:148)
    at ReadData (AdminScreen.js:36)
    at AdminScreen (AdminScreen.js:14)
    at renderWithHooks (react-dom.development.js:15821)
    at mountIndeterminateComponent (react-dom.development.js:18141)
    at beginWork$1 (react-dom.development.js:19357)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:24570)
    at performUnitOfWork (react-dom.development.js:23505)
    at workLoopSync (react-dom.development.js:23480)
    at renderRoot (react-dom.development.js:23155)
    at scheduleUpdateOnFiber (react-dom.development.js:22653)
    at scheduleRootUpdate (react-dom.development.js:25686)
    at updateContainerAtExpirationTime (react-dom.development.js:25712)
    at updateContainer (react-dom.development.js:25812)
    at react-dom.development.js:26370
    at unbatchedUpdates (react-dom.development.js:22952)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26369)
    at Object.render (react-dom.development.js:26460)
    at Module../src/index.js (index.js:30)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (index.js:2)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Solution

  • To read a local file you have two options either you can use XMLHttpRequest or axios.

    Using XMlHttpRequest:

    import XMLData from '../../xmldata/list.xml';
    
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", XMLData, false);
    rawFile.onreadystatechange = () => {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                var xmlasstring = rawFile.responseText;
                console.log('Your xml file as string', xmlasstring)
            }
        }
    

    I would recommend using axios because it is more convenient and better option when working with React JS.

    Using axios:

    import XMLData from '../../xmldata/list.xml';
    
    axios.get(XMLData, {
       "Content-Type": "application/xml; charset=utf-8"
    })
    .then((response) => {
       console.log('Your xml file as string', response.data);
    });
    

    Now after getting your XML you can make object or JSON if you want by using npm packages like react-xml-parser, xml2js. I would recommend using xml2js it's nice. And I believe now you can also send 'POST' request in order to update your XML if you want.