How to display xml data using Reactjs

Question

I want to get the input for React JS as XML format instead of json format. So please reply how to display XML in React js .

Answer 1

I would suggest you parse your xml data to a Javascript object. You can the xml2js library to this end.

Answer 2

Here is my code I got

"Uncaught TypeError: this.props.data.map is not a function"

error on running this code. When I replace XML into JSON file and deleting xmlToJson conversion function it's working fine. I need code to run with XML input.

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <div>
          {comment}
        </div>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'xml',
      cache: false,
      success: function(data) {
        data = xmlToJson(data);
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </div>
    );
  }
});

React.render(
  <CommentBox url="comments.xml"/>,
  document.getElementById('content')
);

function xmlToJson(xml) {

  // Create the return object
  var obj = {};

  if (xml.nodeType == 1) { // element
    // do attributes
    if (xml.attributes.length > 0) {
    obj["@attributes"] = {};
      for (var j = 0; j < xml.attributes.length; j++) {
        var attribute = xml.attributes.item(j);
        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
      }
    }
  } else if (xml.nodeType == 3) { // text
    obj = xml.nodeValue;
  }

  // do children
  // If just one text node inside
  if (xml.hasChildNodes() && xml.childNodes.length === 1 && xml.childNodes[0].nodeType === 3) {
    obj = xml.childNodes[0].nodeValue;
  }
  else if (xml.hasChildNodes()) {
    for(var i = 0; i < xml.childNodes.length; i++) {
      var item = xml.childNodes.item(i);
      var nodeName = item.nodeName;
      if (typeof(obj[nodeName]) == "undefined") {
        obj[nodeName] = xmlToJson(item);
      } else {
        if (typeof(obj[nodeName].push) == "undefined") {
          var old = obj[nodeName];
          obj[nodeName] = [];
          obj[nodeName].push(old);
        }
        obj[nodeName].push(xmlToJson(item));
      }
    }
  }
  return obj;
}

Answer 3

I know this is an old post, but might help some people. To display XML data, I just use the pre element. If you don't need extra functionalities like collapse/uncollapse nodes, then this should do for you.

<pre className="xml-body">
    {this.props.xmlstr}
</pre>

Then you can just style pre with stripe background...

pre.body {
    width: 100%;
    display: block;
    max-height: 500px;
    overflow: auto;
    margin: 0;
    padding: 0 5px;
    background: #F3F2F2;
    background-image: -webkit-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:    -moz-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:     -ms-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:      -o-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-image:         linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
    background-position: 0 0;
    background-repeat: repeat;
    background-attachment: local;
    background-size: 4em 4em;
    line-height: 2em;
    display: none;
}

Hope this helps someone :)

Answer 4

Too bad you have to use JQuery. Fetch the data and make a placement with jquery.

.then(response => {
            return response.text()
         })
        .then(xml => {
            console.log(xml);
            $("#place_holder").text(xml);})

Answer 5

# By importing xml files #

//webpack setting
    module: {
        loaders: [
          { test: /\.xml$/, loader: 'xml-loader' }
        ]
      }
      //index.js
    import xmlName from 'xml url'   //like './xmlfolder/testxml.xml'

    let anotherVar = Immutable.fromJS(xmlName);
    // Now xml is in 'anotherVar'.