AlexBennett3
4 years agoQrew Trainee
Render data using QuickBase's RESTful API in React?
Hey everyone,
I wanted to see if anyone could give me any help for getting some QuickBase data to render using an api call in React. I'm attempting to pull field values from 2 tables in our app to be able to use for outside software, I'm able to get the data to show up in the console. but not when I attempt to render it on screen or call specific fields in the api.
Thanks!
------------------------------
Alex Bennett
------------------------------
I wanted to see if anyone could give me any help for getting some QuickBase data to render using an api call in React. I'm attempting to pull field values from 2 tables in our app to be able to use for outside software, I'm able to get the data to show up in the console. but not when I attempt to render it on screen or call specific fields in the api.
import React, { Component } from 'react'
let headers = {
'QB-Realm-Hostname': 'XXXXXXXXXX.quickbase.com',
'User-Agent': 'FileService_Integration_V2.1',
'Authorization': 'QB-USER-TOKEN XXXX_XXXXX_XXXXXXXXXXXXXX',
'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 => {
if (res.ok) {
return res.json().then(res => {
this.setState({
data: [],
})
});
}
return res.json().then(resBody => Promise.reject({status: res.status, ...resBody}));
}).catch(err => console.log(err))
}
render() {
const { data } = this.state;
if (data === null) return 'Loading...';
return (
<div>
<h3>
{data[18]}
</h3>
</div>
)
}
}
export default JobsTableApi;
Hopefully someone can help me with this is I can't get anything to render! Thanks!
------------------------------
Alex Bennett
------------------------------