Question

这是我的XML数据

<?xml version='1.0' encoding='utf-8'?>
<Library>
<Books>
   <Book>
       <Name>Me Before You</Name>
       <Author>Jojo Moyes</Author>
   </Book>
<Book>
       <Name>Chitra</Name>
       <Author>Rabhindranath Tagore</Author>
   </Book>
<Book>
       <Name>Wings of Fire</Name>
       <Author>A P J Abdul Kalam</Author>
   </Book>
</Books>

</Library>

这是我返回的用于解析数据的代码：

//Some variables are declared globally.

//XML file getting from the upload
var request = new Request(`https://gateway.ipfs.io/ipfs/${this.state.ipfsHash}`);
  fetch(request).then((results) => {
    // results returns XML. lets cast this to a string, then create
    // a new DOM object out of it!
    var values=[];
    var value=[];
    var i='';
    var j='';
    results
      .text()
      .then(( str ) => {
        this.state.responseDoc = new DOMParser().parseFromString(str, 'application/xml');
        console.log(this.state.responseDoc);

//storing in array            
        this.state.listItem  = this.state.responseDoc.getElementsByTagName('Name');
        this.state.listItems  = this.state.responseDoc.getElementsByTagName('Author');

//Using for loop
        for (i=0; i<this.state.listItem.length; i++){
          values.push(this.state.responseDoc.getElementsByTagName('Name')[i].textContent);
        }   
        for (j=0; j<this.state.listItems.length; j++){
       value.push(this.state.responseDoc.getElementsByTagName('Author')[j].textContent);
        }

          this.setState({liItem: values});
         this.setState({liItems: value});
      })
    });

在渲染中，我正在使用以下代码显示输出：

<table border="2">
        <thead>
              <tr>
                <th>Name</th>
                <th>Author</th>
              </tr>
            </thead>
            <tbody>
              <tr>
            <td>{this.state.liItem.map(x => {return x + '\n';})}</td>
            <td>{this.state.liItems.map(y => {return y + '\n';})}</td>
            </tr>
            </tbody>
        </table>

预期输出：

Me Before You
JoJo Moyes and so on...

我得到的输出：

Me Before You    Jojo Moyes
Chitra    Rabhindranath Tagore
Wings of Fire    A P J Abdul Kalam

试图在j中为循环分配j

Answer 1

要在新行上显示：

<tbody>
    <tr>
        <td>{this.state.liItem.map(x => {return x + '\n';})}</td>
    </tr>
    <tr>
        <td>{this.state.liItems.map(y => {return y + '\n';})}</td>
    </tr>
</tbody>

但是，从提供的代码中显示数据似乎不是一个很好的表结构。也许您应该查看列表？

<ul>
        <li>{this.state.liItem.map(x => {return x + '\n';})}</li>
        <li>{this.state.liItems.map(y => {return y + '\n';})}</li>
</ul>

好的，您需要将值存储在一起，而javascript对象可以解决问题，这是假设您没有多个同名作者：

//loading and storing the variables
var responseDoc = new DOMParser().parseFromString(str, 'application/xml');
console.log(responseDoc);

//store in a map           
var names  = this.state.responseDoc.getElementsByTagName('Name');
var authors  = this.state.responseDoc.getElementsByTagName('Author');

//Using for loop
for (i=0; i<names.length; i++){
  //create an object
  let name = names[i].textContext
  let author = author[i].textContext 
  let object = {}
  object[name] = author
  values.push(object);
}   
this.setState({
  objectArray: values,
  objectArraySet: true
}) 


//in the render method

<table border="2">
  <thead>
      <tr>
      <th>Name</th>
      <th>Author</th>
    </tr>
  </thead>
  <tbody>

  {this.displayObjects()}

  </tbody>
</table>


//a method to display the values into the dom
    displayObjects(){
      var dom_array = []
      if(this.state.objectArraySet){
        Object.keys(this.state.objectArray).map(function(key, index){
          dom_array.push(
            <tr>
              <td>
                {key} : {this.state.ObjectArray[key]}
              </td>
            </tr>
          )    
        }, this)
        return dom_array
      } return null
    }

我有两个数组，我需要打印第一个数组中的第一个元素和第二个数组中的第一个元素，依此类推

1 个答案: