如何为某些字段排序API响应

时间:2018-01-04 18:09:54

标签: javascript reactjs

我刚刚开始学习Reactjs并且已经停止了一些问题。 我已通过axios获取某些API端点的数据(获取包含人口,货币,区域等数据的国家/地区),我想对某些字段(例如地区或人口)的数据进行排序。

我认为在reactjs中做起来很简单,反应有一些内置的事情要做。但是,当我试图这样做,当我在谷歌搜索回答时,我真的暴露了。实现排序的最佳方法是什么?我怎么能这样做?

我尝试过的事情:

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  constructor(props){
      super(props)
      this.state={
          countries:[],

      }
  }

  componentDidMount(){
      axios.get('https://restcountries.eu/rest/v2/all')
      .then(response => {
          this.setState({

              countries:response.data

          })
      })
      .catch((error) => {
          console.log("error", error)
      })
  }

  render(){
      return(

          <div className = 'table'>

          <table>
          <tbody>
          <tr>
          <th>Country name </th>
          <th>Currencies</th>
          <th>Region </th>
          <th>Flag </th>
          <th >Population</th>
          <th>Languages</th>

          </tr>
          {
             this.state.countries.map((country,id) => {
                  return(

                      <tr className="tableRow">
                     <td> {country.name}</td>
                     <td>{country.currencies.map((currency,i)=>{
                     return (

                     <p>
                         <span>{currency.name} </span>

                         <span>{currency.symbol} </span>
                         </p>

                     )
                     })} </td>
                     <td> {country.region}</td>
                     <td> <img src={country.flag} alt={country.denonym}/> </td>
                     <td> {country.population} </td>
                     <td> {country.languages.map((language)=>{
                     return (
                         <span> {language.name} </span>
                     )
                     })} </td>
                      </tr>


                  )

              })

          }
          </tbody>

          </table>
          </div>

      )
  }
}

export default App;

1 个答案:

答案 0 :(得分:0)

基本上你需要做的是这样的事情:

display: block

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort