如何訪問XML Feed上的屬性

Question

我正在嘗試從我的React JS應用程序中的xml文件中解析數據，但是它似乎返回包含25個左右“多維數據集”元素的完整xml對象。 我對訪問每個多維數據集的'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;

謝謝，

羅伯特

Answer 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(...) ：