Need to iterate through API response and populate chart

App Building
1

I need to iterate through a Jira API response, however, I can't see how to do this. I looked at the transformers and didn't have any luck. I just started using Retool so any help would be great!
I access the data via the JiraTable query.
The end goal is to pull out the Jira keys and store them in a chart. If there's a better way to do this, that would be awesome.

Here's what the query looks like - {{JiraTable.data.issues['0'].fields.key}}
I need to iterate where the 0 is.
{{SPMAll.data.issues['0'].fields.key}} - JK-0
{{SPMAll.data.issues['1'].fields.key}}- JK-1
{{SPMAll.data.issues['2'].fields.key}} - JK-2

2

Hey @aking43!

You should be able to grab an array of the keys with something like {{SPMAll.data.issues.map(issue => issue.fields.key)}}

Then, if you're using a Chart component you can pass that value directly to the "X-axis values" field:

Does that seem to be what you're looking for? Or could there be a table or some kind of mapped component involved?

3

Apologies for the late reply! Thanks for that insight @Kabirdas, I'll go ahead and test it and see if it works.
Potentially yes this could be mapped to a table. Would that be a better route to take?
Appreciate the help and pointers!

4

Got this to work with - {{SPMAll.data.issues.map(issue => issue.key)}}
Thanks again!

5

Quick follow up, how do I account for pagination for the Jira adapter?
I've tried this query in a Javascript query but doesn't look like it's working........

let return_data = [];
let totalPages = 10;
let resultsPerPage = 100;

for (let page = 0; page < totalPages; page++) {
const response = SPMAll.trigger({ startAt: page * resultsPerPage, maxResults: resultsPerPage });
if (response && response.data && response.data.issues) {
return_data = return_data.concat(response.data.issues);
console.log(page);
console.log(response);
console.log(return_data);
} else {
console.log(Error: response for page ${page} is not valid);
}
}

chart3.data = return_data;
chart2.data = return_data;
table2.data = return_data;
return return_data;

6

Hey @aking43!

Good to hear things are progressing :slightly_smiling_face:

When you're in a JavaScript query the values on components need to be set using specific methods, e.g. table2.setData(return_data) (the objects in the script itself are just copies from the model). I don't believe the Chart component has a similar function though. Instead, what you might want to do is reference the JS query itself in each component using {{}} the same way you would reference the original query.

Is that something you've tried already?

7

Hey @Kabirdas ,
I appreciate the help on this! Yeah I've tried it already but had no luck. Not sure what I'm doing wrong, but will keep trying.

8

Hey @aking43!

Have you had any luck here? If not would you mind sharing a screenshot of what the JavaScript query you're using is returning?

9

Thanks @Kabirdas for your help. I think I found a different work around since I'm just wanting to pull the total results for each type, I created different queries for the different statuses and then pulled those values into an array and then from there put those in a chart. Not exactly the ideal solution but it works for now.