Javascript 如何访问xml提要上的属性

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

我的代码：

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;

import React，{Component}来自'React'；
导入“../../App.css”
类国家扩展组件{
构造函数（）{
超级（）；
此.state={
国家代码：[]，
汇率：[]
};
}
componentDidMount（）{
取（'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml')
.then（response=>response.text（））
.then（str=>（new window.DOMParser（））.parseFromString（str，“text/xml”））
。然后（数据=>{
const cubes=data.getElementsByTagName（“多维数据集”）
for（立方体的常量元素）{
如果（！element.getAttribute（'currency'））{
继续；
}
让countrycodes=element.getAttribute（'currency'）
让exchangerates=element.getAttribute（'rate'）
这是我的国家({
国家代码：国家代码，
兑换率：兑换率
})                                
}
});       
}
render（）{
返回(
{this.state.countrycodes.map（（国家）=>{
{国家}}）
}
)
}
}
出口违约国家；

谢谢

罗伯特

使用：

class.Component{
构造函数（）{
超级（）；
此.state={
国家代码：[]
};
}
componentDidMount（）{
获取（{url:'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml'})
.then（response=>response.text（））
.then（str=>（new window.DOMParser（））.parseFromString（str，“text/xml”））
。然后（数据=>{
常量countryCodes=[]；
const cubes=data.getElementsByTagName（“多维数据集”）；
for（立方体的常量元素）{
如果（！element.getAttribute（'currency'））{
//跳过没有货币的多维数据集
继续；
}
countryCodes.push（{
货币：element.getAttribute（'currency'），
rate:element.getAttribute（'rate'）
});
}
this.setState（{countryCodes}）；
});
}
render（）{
const options=this.state.countryCodes.map(
（{currency，rate}）=>（{currency}-{rate}））；
返回(
{options}
)
}
}

要检查是否可以直接在浏览器控制台中打开并运行

fetch（…）

：

---

您想使用哪种方法访问属性，是要单击还是更改？这是下拉选择吗？我只想通过任何可能的方式访问它们！嗨，Alex，谢谢，但我收到一个错误，说“cubes”不能这样写：未处理的拒绝（TypeError）：cubes[Symbol.iterator]不是函数。可能是因为我试图在对象上迭代？：）它可能依赖于浏览器。但是，在我的示例中，最后没有

[0]

：

const cubes=data.getElementsByTagName（“Cube”），你用我写的吗？谢谢，它起作用了-我现在有了来自提要的数据！谢谢你，你真是个天才！嗨，Alex，为了获得额外的积分，您知道如何在下拉列表中输出每个“货币”和“汇率”属性吗？我试图通过将“货币”和“汇率”列表设置为状态的属性，在我的组件的render方法中以某种方式实现这一点。我目前的代码如下（见上面编辑的问题）：@RobertYoung-yep，已更新。我将在
状态中存储
货币-汇率的数组，并在
渲染中存储
映射状态。
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>
    )
  }
}