如何访问 xml 提要上的属性

Posted 2023-02-19

【中文标题】如何访问 xml 提要上的属性

【英文标题】：How to access attributes on xml feed

【发布时间】：2018-10-18 19:36:26

【问题描述】：

我正在尝试从我的 React JS 应用程序中的 xml 文件中解析数据，但它似乎返回了一个包含 25 个左右“立方体”元素的完整 xml 对象。我有兴趣访问每个多维数据集的“货币”和“汇率”属性，并在下拉列表中输出这些属性。有没有办法遍历所有的立方体并以某种方式定位它们？我正在尝试构建一个自动转换用户输入的价格的货币转换器。

我的代码：

import React,  Component  from 'react';
import "../../App.css"

class Countries extends Component 
    constructor() 
        super();
        this.state = 
            countrycodes: [],
            exchangerates: []
        ;
    


componentDidMount()
    fetch('http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml')
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => 
            const cubes = data.getElementsByTagName("Cube")
            for( const element of cubes) 
                if (!element.getAttribute('currency')) 
                    continue;
                

                let countrycodes = element.getAttribute('currency')
                let exchangerates = element.getAttribute('rate')
                this.setState(
                    countrycodes: countrycodes,
                    exchangerates: exchangerates
                )                                
            
        );       
    


render() 
    return (

        <div className="container2">
            <div className="container1">
                <select>this.state.countrycodes.map((country) => 
                    <option>country</option>)                                            
                
                </select>
            </div>
        </div>
    )
    


export default Countries;

谢谢，

罗伯特

【问题讨论】：

您想使用哪种方法来访问属性，您要 onClick 还是 onChange？

这是下拉选择吗？

我只想通过任何可能的方式访问它们！

【参考方案1】：

使用getAttribute:

class Countries extends React.Component 
    constructor() 
        super();
        this.state = 
            countryCodes: []
        ;
    


  componentDidMount()
    fetch(url: 'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml')
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => 
            const countryCodes = [];
            const cubes = data.getElementsByTagName("Cube");
            for (const element of cubes) 
                if (!element.getAttribute('currency')) 
                    // skip cube with no currency
                    continue;
                
                countryCodes.push( 
                    currency:element.getAttribute('currency'),
                    rate: element.getAttribute('rate')
                );
            
            this.setState(countryCodes);
       );
    

  render() 

    const options = this.state.countryCodes.map(
        (currency, rate) => (<option value=rate>currency - rate</option>));
    return (
        <div className="container2">
            <div className="container1">
                <select>
                  options
                </select>
            </div>
        </div>
    )
  

要检查您可以直接在浏览器的控制台中打开http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml 并运行fetch(...)：

【讨论】：

嗨，Alex，谢谢，但我收到一条错误消息，提示“立方体”不能以这种方式迭代：未处理的拒绝 (TypeError)：立方体 [Symbol.iterator] 不是函数。也许是因为我试图迭代一个对象？ :)

可能与浏览器有关。但是，在我的示例中，最后没有[0]：const cubes = data.getElementsByTagName("Cube");，您使用的是我写的吗？

谢谢，它成功了——我现在有了来自提要的数据！谢谢你，你是个天才！

嗨，Alex，对于额外的奖励积分，您知道如何在下拉列表中输出每个“货币”和“汇率”属性吗？我试图通过将“货币”和“汇率”列表设置为状态的属性，以某种方式在我的组件的渲染方法中实现这一点。我当前的代码如下（见上面编辑过的问题）：

@RobertYoung 是的，已更新。我会在state 中存储currencies - rates 的数组，在render 中存储map 状态。