Can't Render Data with API Call

Question

I've been stuck on this for quite some time now, I can't use a get request and have to use post as that is the only way I am able to get field values back. And no matter what I do, I can't get ANY data to render, as of right now, all i see is the loading... telling me that the data is null. yet I don't know how to change this. Any help would be appreciated.

this is using Fetch to call the QuickBase RESTful API to get multiple field values to just use as data points on line charts. I know this shouldn't be this hard, yet nothing I do can render any data. Using React as well.

import React, { Component } from 'react'

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXXXX.quickbase.com',
  'User-Agent': 'FileService_Integration_V2.1',
  'Authorization': 'QB-USER-TOKEN XXXXXX_XXXXX_XXXXXXXXXXXXXXXX',
  'Content-Type': 'application/json'
};

class JobsTableApi extends Component {
  state = {
    data: null,
  }

  componentDidMount() {
    this.fetchData();
  }    

  fetchData = () => {    
     let body = {"from":"bpz99ram7","select":[3,6,80,81,82,83,86,84,88,89,90,91,92,93,94,95,96,97,98,99,101,103,104,105,106,107,109,111,113,115,120,123,224,225,226,227,228,229,230,231,477,479,480,481],"sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":40,"grouping":"equal-values"}],"options":{"skip":0,"top":0,"compareWithAppLocalTime":false}}

    fetch('https://api.quickbase.com/v1/records/query', {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(body)
    }).then(res => res.json())
      .then( res => {
          this.setState({
            data: [],
          })
        });
      }

  render() {
    const { data } = this.state;

      if (data === null) return 'Loading...';

    return (
        <div>
          <h3>
            {data}
          </h3>
        </div>
    )
  }
}

export default JobsTableApi;

some users have said to map through, but the problem is I don't know how with my current code. some say to use data.value yet it's an array. i've tried data[3], since there is no 'job name' field, or 'amount' field, it's all split up by number as shown above in my select body.

Thanks,

You are setting `data` to an empty array when you fetch the data — WebbH, May 03 '21 at 14:49
If I put a number in there, it just allows me to display the number. not the value of that field — Alex, May 03 '21 at 14:57
you have to set the state to the data, i.e. `this.setState({data: res})` — WebbH, May 03 '21 at 15:06
I've tried that as well, if I do I get ```Error: Objects are not valid as a React child (found: object with keys {data, fields, metadata})``` — Alex, May 03 '21 at 15:20
Thats because you have `{data}` in your return statement, try mapping `data.value` or `data.fields` — WebbH, May 03 '21 at 15:58
So how would you recommend I change this. because if I change {data} to {res} after setting this.setState({data: res}) then no errors but again nothing displays — Alex, May 03 '21 at 16:05
Ok, so i'm attempting to try that with different variations and keep getting ```TypeError: Cannot read property 'map' of undefined ``` — Alex, May 03 '21 at 16:21

score 0 · Accepted Answer · answered May 04 '21 at 12:28

I guess the root cause is coming from using same names in the React's fetch and as a key in the QB response.

You can try to reach data by map via data["data"][item][6].value (6 is a field ID) I have created and tested the following and it works properly.

<div id="mydiv"></div>

<script type="text/babel">

  let headers = {
    'QB-Realm-Hostname': 'XXXXXXXXXX.quickbase.com',
    'User-Agent': 'FileService_Integration_V2.1',
    'Authorization': 'QB-USER-TOKEN XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'Content-Type': 'application/json'
  };
  
  class JobsTableApi extends React.Component {
  
    constructor(props) {
      super(props);
   
      this.state = {
        data: null,
      };
    }
  
    componentDidMount() {
      this.fetchData();
    }    
  
    fetchData = () => {    
       let body = {"from":"XXXXXXXXXXX","select":[3,6,7],"sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":6,"grouping":"equal-values"}],"options":{"skip":0,"top":0,"compareWithAppLocalTime":false}}
  
      fetch('https://api.quickbase.com/v1/records/query', {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(body)
      }).then(response  => response .json())
        .then(data => this.setState({ data }));

    }
  
    render() {
      const { data } = this.state;
  
      if (data === null) return 'Loading...';
      
      return (
        <ul>
          {Object.keys(data["data"]).map(item =>
              <li key={item}>
                  <a> {data["data"][item][6].value} </a>
              </li>
          )}
        </ul>
      )
    }
  }


  ReactDOM.render(<JobsTableApi />, document.getElementById('mydiv'))
</script>

Michael! You're awesome! This is exactly what I needed! Now I just need to work through getting them all and converting the data over to line charts! Thanks so much for your help!! — Alex, May 04 '21 at 14:20

Can't Render Data with API Call

1 Answers1