Pulling up a nested array data from external API

[referee]

Hi,

I recently began delving into the amazing External API feature introduced by the incredible Themeco Team. It is really impressive and opens up a lot of new opportunities not available in other Themes / Page Builders. However, I could not really understand a couple of things so far.

For instance, I do not really understand how to work with nested arrays. If we add ‘.0.’ between the parent array key and the child / nested array key, we pick up only the first item. But what if we need to output all instances stored inside the nested array for a particular string?

In my case, I can only output the first instance by using {{dc:looper:field key="Ages.0.Name"}}. However, if I use {{dc:looper:field key="Ages.Name"}} I have a blank output for it.

Maybe this is related to incorrect setup of Looper Provider and Looper Consumer. Or maybe that is related to the wrong format of JASON request which I need to set to get the data from the API I use.

I am kind of stuck with it while looking for a resolution. API is a totally new thing to me, so I am sorry for probably dummy questions.

[raye]

Hey @referee,

if you want to put out all Ages.Name strings, you can put up a second inner/nested looper which uses Ages as source. And in that looper you can reference the Name field of every Ages item.

[referee]

Oh, it seems like I finally grasped the concept of how to manage the nested array’s data, but I need to double-check if it works right.

In any case, new Max External API course is very much needed to dive deeper into this dev’s topic for sure. I am really looking forward to it. And thanks again for this great feature!

[raye]

I was not able to use your secure notes, since I’m not a Themeco official. But it seems you’re on the right track now?

Have you seen my Weather App API example?

API Weather App Example and Suggestions

Today I played around with External API feature in 6.4b3. Works very nice. I was able to build a small weather forecast page with OpenWeather API. [2023-10-21_19-30] Of course all icons are the new FontAwesome icons. And even the wind direction does have the correct degree Here are some questions/suggestions I noted along the way: In the info field, is there an information where I can tell, if the response is from cache or not? Maybe filetime? often I wanted to string format…

I’m pretty sure, I also used some nested loopers here do iterate some deeper nested array data in the JSON response.

[ruenel]

You are most welcome, John.

Thank you very much for chiming in @Raye.

[referee]

Thanks @raye and @ruenel,

I was just doing Dynamic Content field reference for nested array data incorrectly that is why it didn’t show up. Now it works OK.

But there are more questions coming in about how to use External API for different situations.

Can I create a URL for an image by combining a predefined URI and a Key from a field retrieved from an external API source?

For eaxmple we have standard URI like https://domain.com/images/ and after the last forward slash we need to add a file name or some slug which is pulled up from one of the external resource fields to complete URL for showing up the image.

Some APIs have rather complex data structures and when you pull them up you need to construct something from different pieces first for the real use case. That could be a flag image for instance where we need to take some URI and add a predefined country code right after to reference to the respective image file which is available under full URL only.

With the text it is easy as you can make multiple fields outputs next to each other inside one container if we need to construct a full name for instance from ‘LastName’ and ‘FirstName’ fileds. Creating a URL is more complex because you have to build it before using it to display an image or create a link for a button.

[raye]

Hey @referee,

you can combine a URL from a fixed string and a paramter like:
https://domain.com/images/{{dc:param:language_flag}}
and put that into the url field of an image element.

If you need to gather the last part of the URL from different loopers (i.e. from different APIs), I think that is not possible at the moment, since we cannot save data temporarily in a looper and use it later somewhere else. Also if we are in a nested looper, we cannot pull data from its parent looper.

Two workarounds that come to my mind are:

1. creating a custom looper provider in PHP like documented here: https://theme.co/docs/loopers#custom
2. use a conditions hack

The conditions hack is only possible if all the infos you need are found in the URL or in one additional information from a looper.

Lets say you have a fixed set of elements, like i.e. 12 country flags. But of course you only want to display one of them that corresponds to the current site language. So first create an element, that contains all the 12 flag images. Then add a condition on every flag image. I.E. you can check if the current URL of the site contains a language information like en. So the english flag gets a condition, that it is only displayed, if the current URL contains the string en. The german flag gets a condition, that it is only displayed, if the current URL contains the string de. And so on … a bit tedious and unflexible, but it is working.

Since you can check more than one condition, you can also check an additional information from a looper here. So if the URL and the looper contains all the infos you need, this should work. If you need infos from an additional second looper, then writing a custom looper as stated above, is the only way I can currently think of.

[referee]

Thanks @raye for sharing the information again.

I will definitely check that out.