Блог

Главная - Вопросы по программированию - Как вывести индекс массива в выбранных данных в React

Как вывести индекс массива в выбранных данных в React

#javascript #node.js #reactjs

#javascript #node.js #reactjs

Вопрос:

Следующий код выполняет запрос API и отображает все полученные индексы, что является ответом JSON.

Вместо рендеринга списка мне нужно вывести один индекс массива данных, полученный из ответа сервера:

 class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    }
  }
  //request to api
  loadData() {
    fetch('https://api.privatbank.ua/p24api/pubinfo?jsonamp;exchangeamp;coursid=5')
      .then(response => response.json())
      .then(data => {
        this.setState({
          data: data
        })
      })
      .catch(err => console.error(this.props.url, err.toString()))
  }
  componentDidMount() {
    this.loadData()
  }
  render() {
    return (
      //conclusion data
      {
        this.state.data.map((item) => {
          return <div class = "mypanel" > currency: {
            item.ccy
          }
          exchange: {
            item.buy
          } < /div>
        })
      }
    )
    React.render(document.getElementById('mypanel'));
  }
}

export default Test;

Комментарии:

1. Не могли бы вы пояснить немного яснее, что вы подразумеваете под «выводом одного индекса массива данных, полученного из API». Возможно, вы имеете в виду длину массива данных?

2. Я имел в виду вывод определенного индекса массива вместо всего.

Ответ №1:

Я предполагаю, что вы хотите отобразить элемент, соответствующий определенному индексу, из списка элементов, полученных с сервера. Вы можете сделать это как:

 <div class = "mypanel" > 
currency: { this.state.data[index].ccy} exchange: {
            this.state.data[index].buy
          } < /div>

где ‘index’ — это значение индекса, которое вы хотите отобразить.

Ответ №2:

Если вы хотите отображать только определенные элементы в зависимости от некоторых условий, вы можете использовать функцию фильтра из массива и фильтровать свои элементы, как показано ниже. 

 this.state.data.filter(item=>{
   return item.buy=== "buy"?true:false;
}).map((item) => {
          return <div class = "mypanel" > currency: {
            item.ccy
          }
          exchange: {
            item.buy
          } < /div>
})

Если вы хотите показать только определенное количество элементов, вы можете использовать цикл for или forEach и принимать только обязательное количество элементов. Вы можете написать отдельную функцию и вызвать то же самое, как показано ниже.

 function ShowSome(noOfItemsToTake){
      const items = [];
      const data = this.state.data; 
      const noOfItems=  noOfItemsToTake< data.length?noOfItemsToTake:data.length; 

          for (let i=0; i<noOfItems;i  )
          {
            items.push(  
              <div class = "mypanel" > currency: {
                data[i].ccy
              }
              exchange: {
                data[i].buy
              } < /div>) 
          }
     return items;  
}




render() {
    //Showing first 5   
    return this.ShowSome(5);
 }