Wix: Populate repeater with external API call

Question

I'm referring to the following video How to Create A Web App With External API Access using Wix Code & wanted to know how I would populate a repeater rather than populating a paragraph tag as shown in the youtube video mentioned above.

Basically here is the pseudocode of what I would like to achieve:

If search box is equal to null or empty
    Display all crypto currencie(s)
else
    Display single crypto currency

Answer 1

Putting the info in a repeater isn't too different than what the example already shows. Actually, when the search box is empty, the API returns an array that just needs a little playing with to get it to work with a repeater.

So, assuming you added a repeater with the ID repeater1 that contains a text element with the id result, you can make the following minor changes to the page code. You don't need to touch the backend code at all.

First, in the button1_click event handler we'll remove the code that populates the text element with the data returned from the API. Instead, we'll add an _id property to each currency object (required for the repeater) and then feed that data to the repeater.

export function button1_click(event) {
  getCryptoCurrencyInfo($w("#currencyInput").value)
    .then(currencyInfo => {
      // add an _id property to each currency object
      currencyInfo.forEach(item => item._id = item.id);
      // feed the data to the repeater
      $w('#repeater1').data = currencyInfo;
    } );
}

Then, we can take the code for populating the text element and stick it in the repeater1_itemReady event handler. This function will run once for each currency item in the array fed to the repeater's data property. Make sure you use the properties panel to wire the function to the matching repeater event.

export function repeater1_itemReady($item, itemData, index) {
  $item("#result").text = "Name: " + itemData.name + "\n"
    + "Symbol: " + itemData.symbol + "\n"
    + "Rank: " + itemData.rank + "\n"
    + "Price (USD): " + itemData.price_usd + "\n"
    + "Market Capitalization (USD): " + itemData.market_cap_usd + "\n"
    + "Percent Change 1h: " + itemData.percent_change_1h + "\n"
    + "Percent Change 24h: " + itemData.percent_change_24h + "\n"
    + "Percent Change 7d: " + itemData.percent_change_7d;
}

Notice two subtle changes to the code. First, we use $item instead of $w to select the text element. This selects the specific instance of the text element in the current repeater element. Second, we use itemData instead of currencyInfo[0]. This gives us the specific data that is associated with the current repeater element.