如何使用ReactJS捕获此API数据

时间:2018-12-28 17:37:09

标签: json reactjs api

嗨,有人可以帮忙吗?我正在尝试从此API请求中获取我的API数据,但似乎无法管理如何获取所需的位。

基本上,我需要在<p></p>中显示的是“天文数字”:“ 0.4838725338”,

这是我的json数据

{
  "links": {
    "next": "https=DEMO_KEY",
  },
  "element_count": 6,
  "near_objects": {
    "2018-12-28": [
      {
        "links": {
          "self": "x"
        },
        "id": "2450238",
        "estimated_diameter": {
          "kilometers": {
            "estimated": 0.6089126221,
            "estimatedmax": 1.3615700154
          }
        },
        "is_potentially": false,
        "approach": [
          {
            "date": "2018-12-28",
            "epoch": 1545984000000,
            "distance": {
              "astronomical": "0.4838725338",
              "lunar": "188.2264099121",
            },
            "orbitinody": "Nobes"
          }
        ],

这是我的组件

 class App extends Component {


  state = {
    data : []
  }

  componentDidMount() {
    this.fetchasa();
  }

  fetchasa = () => {
    fetch('https:?de_KEY')
    .then((response) => response.json())
    .then((result) => this.setState({
      data: result.near_objects.2018-12-28.approach.distance[0]
    }))
  }



  render() {
    const {data} = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Edit <code>src/App.js</code> and save to reload.</p>
          <p>astronomical: {data}</p>
        </header>
      </div>
    );
  }
}

export default App;

请帮助并提前感谢您:D

1 个答案:

答案 0 :(得分:1)

尝试:

result.near_objects['2018-12-28'][0].approach[0].distance.astronomical

如果在请求之前不知道near_objects的索引名称,则可以获取像这样的日期值

const [first] = Object.keys(result.near_objects)
result.near_objects[first][0].approach[0].distance.astronomical
相关问题