Как разделить объекты массива axios get
Здравствуйте, я сделал простой запрос на получение AXIOS и получил массив объектов. Но пример, который я использовал для достижения этой цели, возвращает весь массив одновременно, и мне нужно разделить объекты, чтобы я мог использовать каждый из них отдельно.
class apitest extends Component {
constructor(props) {
super(props);
this.state = {
cryptos: []
};
}
componentDidMount() {
axios
.get(
"https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx"
)
.then(res => {
const cryptos = res.data;
console.info(cryptos);
this.setState({ cryptos: cryptos});
});
}
render() {
return (
<div className = "test">
{Object.keys(this.state.cryptos).map(key => (
<div id = "crypto-container">
<span className = "left">{key}</span>
<span className = "right">
<NumberFormat
value = {this.state.cryptos[key].EUR}
displayType = {"text"}
decimalPrecision = {2}
thousandSeparator = {true}
prefix = {"€"}
/>
</span>
</div>
))}
</div>
);
}
}
export default apitest;
Объект { BTC: {…}, ETH: {…}, XRP: {…}, BCH: {…}, EOS: {…}, TRX: {…} }
Это не массив объектов, это объект со свойствами, которые, в свою очередь, являются объектами. Это правильно?
Да вы правы!
Именно это объект со свойствами, которые в свою очередь являются объектами. Так что либо отредактируйте свой вопрос, либо спросите соответственно
Смотрите ответ ниже (и я согласен, что это, вероятно, идея изменить название вопроса;)).
правильно ответил
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ответ от AXIOS представляет собой массив JSON? Если да, пытались ли вы заставить ответ json в AXIOS?
axios
.get(
"https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx",
{
responseType: 'json',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
)
.then(...)
Помимо этого, то, как вы выполняете итерацию при рендеринге, было бы лучше:
- Проверьте, существует ли
this.state.cryptos, прежде чем повторять его. - Поместите
keyна первый отступ в итераторе; Это нужно ReactJ. - Создайте итератор объекта вместо ключевого итератора.
Рефакторинг рендеринга:
render() {
if (this.state.cryptos.length === 0) return null;
return (
<div className = "test">
{this.state.cryptos.map((crypto, key) => (
<div id = "crypto-container" key = {key}>
<span className = "left">{key}</span>
<span className = "right">
<NumberFormat
value = {crypto.EUR}
displayType = {"text"}
decimalPrecision = {2}
thousandSeparator = {true}
prefix = {"€"}
/>
</span>
</div>
))}
</div>
);
}
Вы получаете объект, свойства которого сами являются объектами. Для перебора этих свойств вы можете использовать Object.keys(), например:
Object.keys(response).forEach((property) => {
// Access each object here by using response[property]...
})
Вам также может понадобиться сначала преобразовать ответ из JSON, но я уверен, что вы знаете, как это сделать.
Это работает, если вам не нужно позже удалять (фактически, splice()) элементы массива. Вы можете удалять элементы объекта с помощью delete response[property], но в объекте «индексы» (то есть ключи) не меняются.
Не могли бы вы опубликовать пример ответа, который вы получаете?