Jaascript produces unwanted result and then after that produces the wanted result

App Building
1

Hi Retool folks,

I have this js query:
// Extract the values from query1
const query1Values = ods_carrier_opt_compare2.data;

// Extract the values from query2
const query2Values = polaris_plan_ids_compare.data.flatMap(obj => obj.externalRefs);

// Create a mapping of carrier_opt to their member count in query1
const query1ValueCount = query1Values.reduce((acc, obj) => {
const carrierOpt = obj.carrier_opt;
if (!acc[carrierOpt]) {
acc[carrierOpt] = 0;
}
acc[carrierOpt] += obj.Members;
return acc;
}, {});

// Find the unique carrier_opt values that are present in query1 but not in query2
const uniqueCarrierOpts = Object.keys(query1ValueCount).filter(carrierOpt => !query2Values.includes(carrierOpt));

// Filter out "Grand Total" and return the result along with carrier_opt and Member count
const result = uniqueCarrierOpts
.filter(carrierOpt => carrierOpt !== "Grand Total")
.map(carrierOpt => ({ carrier_opt: carrierOpt, Members: query1ValueCount[carrierOpt] }));

return result;

I have an alert component set up that hides the above result if the query == 0. Because the js query produces an unwanted result first, the alert appears for a second and then hides itself when the js query produces the final result which is 0. This makes the end user think there may have been data returned when there was 0 results because the alert boxes pops up for a split second but then hides. Any insights?

2

What is triggering this script? Do both of the data sources have a success handler doing so? If so the first one to finish would trigger the JS script and compare against an empty data source.

1 Like
3

@kschirrmacher Yes both the data sources I had set to trigger the js query after success. I removed those triggers, then tried to trigger it using another query but nothing seems to be working.

1 Like
4

Since you don't know which query will be the last to finish, I think you'll want to trigger them from a script using async/await to trigger your JS only once both API queries have resolved.

const queryTrigger = async () => {
   const ods_carrier_opt_compare2 = await ods_carrier_opt_compare2.trigger()
   const polaris_plan_ids_compare = await polaris_plan_ids_compare.trigger()

   if(ods_carrier_opt_compare2 && polaris_plan_ids_compare){
   yourJSComparisonQuery.trigger()
}else{
   throw new Error('Query failed')
}
}

queryTrigger()
1 Like
5

@kschirrmacher Thanks for you prompt assistance on this. That worked. do you have any thoughts on how to also hide my component when an input value changes?

6

Hi @AccoladeRetool I imagine you can set up a conditional ternary Javascript statement to check for certain conditions & either show or hide. Does this seem like it would work for your use case or are there any blockers?

Some components may also have the option to trigger componentName.setHidden() in your JS query. The alert component doesn't have a setHidden option yet, but containers do, so if you prefer this approach, you could put it in a container and show/hide the container programmatically

7

Hi @Tess I think this will work. Thank you for your help.

1 Like