Connecting Json Output from API call to table

💬 Queries and Resources
1

Hi, completely new to retool and am stuck at what is probably a very basic step. I am querying an API which returns JSON like so:
{
"Global Quote": {
"01. symbol": "AAPL",
"02. open": "216.1500",
"03. high": "220.3800",
"04. low": "215.1000",
"05. price": "220.2700",
"06. volume": "58046178",
"07. latest trading day": "2024-07-02",
"08. previous close": "216.7500",
"09. change": "3.5200",
"10. change percent": "1.6240%"
}
}

What I want to do is to link this output to a table, where I want to display three columns: symbol(01. symbol), price(05. price) and percentchange (10. change percent) in a table.

When I try to link this query to the table component as a data source, i get an error saying that "The selected data source could not be converted to an array".

What am I missing? I'm sure its something very basic.

2

Hello @ssmmuu and welcome to Retool!

You are right that there is a little step or two you need to take here to get the data you want into the table.

  1. The data needs to be formatted as an array, so you should wrap your data source with the formatDataAsArray(yourQuery.data) function.

  2. The actual array of data you need is held within the "Global Quote" object of your API output, so you will need to be sure to only be grabbing that object to turn into the final array:

{{ formatDataAsArray(yourAPIQuery.data["Global Quote"]) }}

After that you should see the values you need to refresh the column data:

image
image715×536 26.3 KB

Here the jsonReturn.data was just your JSON object being returned via a JS Query. So it should be a simple matter of swapping out for your data:

image

1 Like
3

Quick edit to add: I realized that my output shows an atomized array of values "A", "A", "P", "L" due to the formatDataAsArray

Fix this by using [ theData ] in the Data source JS instead:

{{ [jsonReturn.data['Global Quote']] }}