Issues Displaying API call results data dynamically

mamohamud · 2024-08-06T17:10:55.328Z

Post Content:

Hello Bubble Community,

I am currently building a menstrual cycle tracking app with features to track missed prayers. I want to display the Islamic Calendar date (Hijri dates) using the Aladhan API. Despite following the usual steps, I’ve encountered several issues and would appreciate your assistance:

API Call Configuration:
• I have successfully initialized the Aladhan API call, but configuring the dynamic date parameter and ensuring consistent data retrieval has been challenging.
Displaying API Call Data Directly:
• Initially, I tried to display the API call result directly in text elements. However, the API call result did not appear in the data source options for the group or text elements, and the data was not displayed.
Debugging Data Flow and Visibility:
• The debug mode showed that the API call was returning data, but the text elements remained empty. I had difficulty verifying and ensuring the data flow from the API call to the UI elements.
Data Source Binding Issues:
• I encountered issues binding the API call result directly to the group’s data source. This made it impossible to dynamically bind and display the data without using custom states or other intermediate steps.

Has anyone faced similar issues or can provide insights on how to correctly bind API call results to groups and display them dynamically? Any help or suggestions would be greatly appreciated.

Thank you!

Jici · 2024-08-06T17:12:19.819Z

What is the returned payload from API in API Connector?

mamohamud · 2024-08-06T17:45:12.701Z

Hi!

This is the payload from the API:
{
“code”: 200,
“status”: “OK”,
“data”: {
“hijri”: {
“date”: “14-02-1436”,
“format”: “DD-MM-YYYY”,
“day”: “14”,
“weekday”: {
“en”: “Al Ahad”,
“ar”: “الاحد”
},
“month”: {
“number”: 2,
“en”: “Ṣafar”,
“ar”: “صَفَر”
},
“year”: “1436”,
“designation”: {
“abbreviated”: “AH”,
“expanded”: “Anno Hegirae”
},
“holidays”:
},
“gregorian”: {
“date”: “07-12-2014”,
“format”: “DD-MM-YYYY”,
“day”: “07”,
“weekday”: {
“en”: “Sunday”
},
“month”: {
“number”: 12,
“en”: “December”
},
“year”: “2014”,
“designation”: {
“abbreviated”: “AD”,
“expanded”: “Anno Domini”
}
}
}
}

system · 2024-10-15T17:11:50.520Z

This topic was automatically closed after 70 days. New replies are no longer allowed.