Rest-api

[evaluate]

Hi,

first of all i love wappler and i am not a developer more like a power user (try to be)

i have read docus and also see the videos from youtube.

Actually i am stuck a little bit. Maybe someone can help me.

I have connected an external REST-API. In my first call i get a list with items and they have a ProductID.

I shown the data in a table and it works fine. I now try to display the “Stock” from one of these products.

But i need to make one new API Call with the ID from the first API Call

(Get Products first one, GET Stocks with the ID from the Product second one)

Can you help me how i do it the right way? I user the server side action.

Best regards and sorry for my bad english

[sid]

Hi. Welcome to the community.
You can use a repeat step to traverse all the products returned in the first API step, and then add another API step inside the repeat.
In the new API step, you can use bindings shown under repeat in the picker to get the current product id, while it loops.

Remember to enable output for both API & Repeat to see results on client side.

[evaluate]

thanks sid i will try and come back

[evaluate]

Hey Sid,

it works but only for the first ID - i click on cell in frontend and bind the data from the stock call.
my step looks like this:

in console i get:

but the repeat stocks seems to only take the first ID.

[evaluate]

I have done now the following:

• i create a new variable on server side action
• i put the variable in the repeat
• i bind the variable to the ID from the first call
• i bind the value from the variable to the second api call

now i get in the console the stocks per product. but now i am stuck how to display those.

Is this the right way, i am using that function?

[sid]

@evaluate

but the repeat stocks seems to only take the first ID.

What is the binding you are using here?

@evaluate

i create a new variable on server side action

Don’t think any variable is needed. The setup in first screenshot looks fine. Just the binding would be incorrect.

@evaluate

but now i am stuck how to display those.

What UI are you planning to show the data? You now have nested repeats. So each row in the original set has multiple rows inside.

Also, make sure to select the columns you want from original API response as output fields in repeat step.

[bpj]

In your second screenshot

the Text property has been linked to the serverconnect call, rathere than the element in the table’s repeat. It should just be stockid or stockLevel or whichever field you want to show in the cell. You shouldn’t have getProduct.data.query[0] (or something similar) at the start

[evaluate]

Hi Sid,
my bindings without the variable was:

'https://myapi/api/v1/merchant/stocks/’+products.data.items[0].sku

products.data.items[0].sku

but by the setup without the variable, the console only shows the data for the first SKU.

With variables i get the data in console for 3 sku´s with the correct stock.

do i do something wrong with the binding without the variables?

[evaluate]

my bindings look like this:
getproducts.data.repeat[0].stocks.data.stockLevel

[bpj]

@evaluate

stocks.data.stockLevel

Just use this bit

[sid]

@bpj Take it easy on the fellow Wappler with manual code. The pickers are much better now, so no need for manual code always. I would have suggested the same 6 months ago, but now I prefer the “visual way” for learners.

@evaluate When you open the picker to select binding for repeat, you need to select just until the items object. That’s an array and the repeat will run as many rows there are in items.
Next, when you select binding for the URL of API step, you should see in the picker the REPEAT step showing some options - select the sku/productid from there, and NOT the original API step.

This will basically give you what Ben is suggesting in the code.

[evaluate]

i tried that but then it shots nothing instead of the first stocklevel

the 20 is the stocklevel
when i change that to stocks.data.stockLevel

the value is gone

[evaluate]

@sid

@bpj Take it easy on the fellow Wappler with manual code. The pickers are much better now, so no need for manual code always. I would have suggested the same 6 months ago, but now I prefer the “visual way” for learners.

@evaluate When you open the picker to select binding for repeat, you need to select just until the items object. That’s an array and the repeat will run as many rows there are in items .
Next, when you select binding for the URL of API step, you should see in the picker the REPEAT step showing some options - select the sku/productid from there, and NOT the original API step.

i will try that.

[evaluate]

Ok on Server Sice i got it to work now so that it shows me in console every stock per SKU without the variables! It was the false binding in my server side action. Thanks!!

But now i have the same problem with showing the Data in a Bootrstap 5 Table.

I selected one Cell and bind it to the stocklevel from the repeat action. Ist this wrong?

Many thanks for your help

[sid]

Please share screenshots and code of the client side setup.

[evaluate]

Hi Sid,

i got it to work now - i have forgotten to set the output fields in the repeat field

I now got all to work.
Next i added a Delete Button and make a new API Call with the SKU. It Works fine!

Actually i have added a refresh button which calls the api again and opens a dynamic modal for loading spinner.

How can i update the bootstrap 5 Table without loading the whole page?

Is there a tutorial for loading spinners?

Thank you !

[sid]

Glad to see you got it working.

@evaluate

How can i update the bootstrap 5 Table without loading the whole page?

You just need to call the SC again on click of the refresh button… that will automatically update the data as per the bindings. No need to refresh the whole page.
sc1.load()

As for spinners, there is a built-in component called page-loader of something.
That fires itself when a SC is loading I think. Or you can call it on demand as well.

I personally don’t use page-loaders, instead just a simple SPIN icon which shows when SC is executing. It looks something like:
dmx-show="sc1.state.executing"

[evaluate]

oh cool that was easy
thanks for pushing me in the right direction!

[evaluate]

Hey Sid,

maybe you can help me again
i am right now sitting on a page “Orders” where user can add some items from the API and Post an order to an API.

I have make a new form, and make a get call for the items so that they can select one or more items.

i want to have a select field where useres can select one or more items. and then i want to post the order.

but the order json has this structure, and i am not sure how to repeat the Items.

i think its a nested json right? But how can i set it up on server action?

“orderValue”: 15.05,
“items”:[
{
“outboundItemId”: “5”,
“sku”: “yoursku”,
“itemType”: “Product”,
“quantity”: 203.202,
“name”: “Interdimensional Goggles”,
“merchantSku”: “ART2394871”,
“externalNumber”: “EX1234-001”,
“price”: 15.05,
“vat”: 15.05,
“billOfMaterialsId”: “12”,
“note”: “This is a custom note.”}
],

[sid]

When you say items, I am assuming you are just after a bunch of IDs… and rest of the data like name, quantity etc can be retrieved on server side, if needed.

So, you simply need a multi-select select component on the client side. Or you can use tagify component.
Then on server side, you should get an array of selected items.

There has been a recent option to have nested array data in form: Using App Connect Form Repeater with Update Record Forms
So this might be what you are looking for as well.