Repeat over two arrays simultaneously?

I have two arrays. One comes from an API call and another comes from an API call that maps a function over that array (it’s actually more complex than this, but hopefully, this is enough detail). Ideally, I’d just be able to take these two arrays, zip them together, and loop over both of them on the front-end. Can I get a repeat to loop over two arrays? If so, how?

We did this recently. @sid can share our custom formatter.

1 Like

Have you already tried.

That would be great @sid!

Unfortunately, I don’t believe this achieves the functionality I need. The reason I want to do this on the front-end is that array 1 needs to be displayed immediately (it’s available on page load). Array 2 takes a few seconds to get from an API after the page loads and doesn’t need to be displayed immediately. Basically, I’m trying to create a list of items from array 1 and more info from corresponding elements of array 2 that displays on hover of the ?'s in the screenshop below:
Screen Shot 2021-08-10 at 6.28.52 PM

And to do this, in the HTML, the items from array 2 are children of the items from array 1.

if i understood correctly, you can try to do this on client side via data store.
have the server connect update the data store with the array 2 response on its success event.

1 Like

Your use case sounds pretty simple to achieve in my mind, obviously depending on if a few things are in place.
If your first array from the API and your second array from the API both have a common column/data such as an ID, then do a server action only for the first API call to get all the on page load results.
Display the results on your page as you have.

Create a second server action that just fetches a single result and make it only load when the user hovers over the icon, passing the API the ID from the hovered over item.

Maybe there are other reasons I am un aware of why this may not work, but it sounds like it should.

Thanks, Nish! I was able to get this to work to solve my specific use case.

1 Like