Как получить доступ к атрибутам на фиде xml - PullRequest
Новая
       15

Как получить доступ к атрибутам на фиде xml

0 голосов
/ 08 мая 2018

Я пытаюсь проанализировать данные из xml-файла в моем приложении React JS, но, похоже, он возвращает полный xml-объект, содержащий около 25 элементов «куба». Мне интересно получить доступ к атрибутам «валюта» и «курс» каждого куба и вывести каждый из них в раскрывающемся списке. Есть ли способ перебрать все кубы и как-то нацелить их? Я пытаюсь создать конвертер валют, который автоматически конвертирует введенную пользователем цену.

Мой код: 

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;

Спасибо

Роберт

1 Ответ

0 голосов
/ 09 мая 2018

Использовать 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(...) прямо в консоли браузера:

enter image description here

...