How do I grab this API data using ReactJS

Question

Hi Could anyone help with this? I am trying to grab my API data from this API request but cannot seem to manage how to grab the bit I need.

Basically what I need to display in my <p></p> is this "astronomical": "0.4838725338",

Here is my json data

{
  "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"
          }
        ],

And here is my Component

 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;

Please help and thank you in advance :D

hecontreraso · Accepted Answer · 2018-12-28 17:50:35Z

1

Try with:

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

If you don't know the index names of near_objects prior to the request, you can get the date value like this

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

answered Dec 28, 2018 at 17:50

hecontreraso

1,3083 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I grab this API data using ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related