what is the optimal way to consume weather API where particular city weather should be shown in the page dynamically?

[karthick1356]

if you could explain with example that will be helpful.

[DEBAL_DAS]

1. As you are going to deal with dynamic data so please use Sling Dynamic Include as explained here

https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/development/set-up-sling...

2. Level of complexity during processing like extract the requisite data fields from the amount/volume data receive from the weather api and display on page . Based on amount/volume of data you need to take the decision whether you want to extract the data via front end or Back end logic.

[karthick1356]

One case: lets say we need to display only a city name and its weather data, so how will be achieving this in optimal way?

Second case: if its huge data and we need to consume  and display it in AEM Page? how to approach this and solve this in optimal way?

[DEBAL_DAS]

Case 1: Assuming weather data will be available based on the selection of a city.

In this case you could make an ajax call to get the city specific weather data like temperature, wind speed, humidity and get these displayed on page.

Let's assume that you are getting json response and your front end code can easily process these data while displaying on page. 

Case 2: In terms of huge data , are you referring weather data of all Indian cities at a time? 

If yes, in that case it won't be a good idea to put entire burden on front end level. You can add one more layer(logic) to consume the data, fetch the city specific weather data like temperature, wind speed, humidity then prepare a json response and share it front end so, that they can easily process these data while displaying on page. 

[karthick1356]

@DEBAL_DAS ,Thanks for response.

case 1: is it same for if weather data is 3rd party API?

case 2: Yes, do we have any example available ?

[DEBAL_DAS · Accepted solution]

case 1: yes, I did the similar implementation with 3rd party API to populate stores based on UK postcode. We made ajax call to get list of stores and this approach helped the browser  to continue loading the other content on the page simultaneously.

case 2: If you are dealing with huge json data then you could use Google's https://github.com/google/gson.

Please refer this : https://www.aemtutorial.info/2019/05/ 

The same  point has been highlighted here also : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-where-to-store-json...