0

I am building a simple react app using create-react-app where i need to read data from this xml and display in UI. I have tried almost all the XML converting packages like xml2js, xmltojson stream, xml-js,,xml2json but failed. xml2js i have tried and converts small xml to json but when i try my xml it fails with error:

Error: Unquoted attribute value
Line: 0
Column: 40401
Char: &
    at error (sax.js:651)
    at strictFail (sax.js:677)
    at SAXParser.write (sax.js:1367)
    at Parser.exports.Parser.Parser.parseString (parser.js:323)
    at Parser.parseString (parser.js:5)
    at Object.<anonymous> (Sal.js:22)
    at __webpack_require__ (bootstrap ac9a14d02bd3405bc94c:555)
    at fn (bootstrap ac9a14d02bd3405bc94c:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap ac9a14d02bd3405bc94c:555)

My XML is 2784 lines long and is structured as below:


    <response>
    <header>
    ..
    .
    .
    .
    </header>
    <branches>
    ..
    ..
    </branches>
    <Products>
    <product1>
    ..
    ..
    </product1>
    <product2>
    ...
    </product2>
    ...
    ...
    ...
    </Products>
    </response>

I am okay to read the xml as local file or a local variable but somehow i need access to all Products field details to display on UI.

My code
var convert = require('xml-js');
import fs from 'fs'

var xml2 = fs.readFileSync('./xmlText.xml', 'utf8');
var options = {ignoreComment: true, alwaysChildren: true};
var result = convert.xml2js(xml2, options); // or convert.xml2json(xml, options)
console.log(result);

Uncaught TypeError: _fs2.default.readFileSync is not a function
    at Object.<anonymous> (converter.js:25)
    at __webpack_require__ (bootstrap efc8124703a44966d7ce:555)
    at fn (bootstrap efc8124703a44966d7ce:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap efc8124703a44966d7ce:555)
    at fn (bootstrap efc8124703a44966d7ce:86)
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap efc8124703a44966d7ce:555)
    at fn (bootstrap efc8124703a44966d7ce:86)
    at Object.<anonymous> (bootstrap efc8124703a44966d7ce:578)


if i declare xml as a variable i get below error:
sax.js:651 Uncaught Error: Invalid character in entity name
Line: 0
Column: 54128
Char:  
    at error (sax.js:651)
    at strictFail (sax.js:677)
    at SAXParser.write (sax.js:1491)
    at Object.module.exports [as xml2js] (xml2js.js:346)
    at Object.<anonymous> (converter.js:27)
    at __webpack_require__ (bootstrap 3a3dffa4ca814efe6ba5:555)
    at fn (bootstrap 3a3dffa4ca814efe6ba5:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap 3a3dffa4ca814efe6ba5:555)
    at fn (bootstrap 3a3dffa4ca814efe6ba5:86)
Cheroki
  • 11
  • 3
  • 1
    Your XML is invalid. The error message tells you where that error is. You've failed to include the relevant bit of XML in the question. Fix the XML. Then an XML parser will be able to parse it. – Quentin Feb 25 '20 at 12:13
  • The same xml is working when i try with : var convert = require('xml-js'); var file = require('fs'); var xml = require('fs').readFileSync('./xmlText.xml', 'utf8'); var options = {ignoreComment: true, alwaysChildren: true}; var result = convert.xml2js(xml, options); // or convert.xml2json(xml, options) console.log(result); But inside a react component i am getting err. – Cheroki Feb 25 '20 at 12:43
  • Then there's probably something wrong with how you are reading the XML in the component. You need a [mcve] – Quentin Feb 25 '20 at 13:06

1 Answers1

0

I have acheived this when i have replaced the ' and & symbols in my xml.

var convert = require('xml-js');


var xml = '<myxml></myxml>'
var options = {ignoreComment: true, alwaysChildren: true};
var result = convert.xml2js(xml2, options); // or convert.xml2json(xml, options)
console.log(result);
Cheroki
  • 11
  • 3