Webhook - Multiple Variables

ccleveradmin

I saw a few other posts that touched on this, but was not quite clear on if this is something natively built into Typebot. I am pulling data from a webhook that looks like this.

Plain Text

[
  {
    "json": {
      "articles": [
        {
          "id": 215,
          "slug": "what-to-try-if-you-can-t-install-or-activate-office-for-mac",
          "name": "Office - What to try if you can't install or activate Office for Mac",
          "url": "https://kb.mindyourbusiness.com/kba/what-to-try-if-you-can-t-install-or-activate-office-for-mac",
          "object_type": "Article",
          "folder_id": 64,
          "enable_sharing": null,
          "share_url": null,
          "archived": false,
          "company_id": null,
          "created_at": "2023-05-10T04:20:20.233Z",
          "updated_at": "2023-09-29T17:13:58.997Z",
          "public_photos": []
        },
        {
          "id": 210,
          "slug": "activate-office-using-the-activation-wizard",
          "name": "Activate Office using the Activation wizard",
          "url": "https://kb.mindyourbusiness.com/kba/activate-office-using-the-activation-wizard",
          "object_type": "Article",
          "folder_id": 64,
          "enable_sharing": null,
          "share_url": null,
          "archived": false,
          "company_id": null,
          "created_at": "2023-05-10T04:20:18.344Z",
          "updated_at": "2023-05-10T04:20:18.344Z",
          "public_photos": []
        }
      ]
    },
    "pairedItem": {
      "item": 0
    }
  }
]

I want to be able to list each occurrence of "name" along with a link to the "url". There could be as many as 25 objects returned.

18 comments

BBaptiste

When you test your webhook request, you can then save the response to a variable and the data drop-down should help you select the right syntax, it should look like:

data.flatMap(item => item.json.articles.flatMap(item => item.name))

BBaptiste

This is for Names

BBaptiste

You can do the same for URLs

BBaptiste

Check out the Movies recommendation template for reference

ccleveradmin

Thanks @Baptiste. When I did this in my testing and used the saved variable, {{name}} for example, it would only output one item in the text bubble. I've worked around it for now using javascript, but I'm not entirely sure what I'm missing.

ccleveradmin

Here's a flow that hits a webhook that returns this fake data. When I select data.data.flatMap(item => item.name) as the variable {{names}} and then output that in a text bubble, only the last name is provided. (Video of flow here: https://share.cleanshot.com/r69Q4q8c)

Plain Text

{
  "data": [
    {
      "name": "Jennifer Smith",
      "client_name": "Encore Projects Inc",
      "emailaddress": "[email protected]",
      "phonenumber_preferred": "+1 4035551234",
      "phonenumber": "",
      "mobilenumber": "+1 4031111234"
    },
    {
      "name": "Jennifer Jones",
      "client_name": "Gotham Insurance Group",
      "emailaddress": "[email protected]",
      "phonenumber_preferred": "403.123.4567",
      "phonenumber": "403.666.6666",
      "mobilenumber": ""
    }
  ]
}

BBaptiste

On a typebot v6, if you display a list variable in a text bubble, it will show only the last item.

I've introduced typebot v7 that removes that behavior (more info: https://docs.typebot.io/breaking-changes)

You should upgrade your app to v2.19.1

ccleveradmin

Ok, did the upgrade. I see now it's returning an array as such:
["Jennifer Smith","Jennifer Jones"]

How do I get the text bubble to treat that as individual rows of data? Or should I still be using javascript to accomplish that? Cheers.

BBaptiste

You'd like to display the first or the last item?

ccleveradmin

All items.

ccleveradmin

Formatted as rows. So:

Jennifer Smith
Jennifer Jones

And eventually that data will include URLs so I'd like them formatted as markdown links. Already able to do this via javascript, but it's just a bit of a pain when adding new endpoints/data.

BBaptiste

You need to do it in a Set variable block. I can help with the code if you need?

ccleveradmin

If you have time. I have some code already, but not sure it's very clean.

BBaptiste

to have it as a list of bullet points:

BBaptiste

'- ' + {{My list}}.join('\n- ')

ccleveradmin

That is embarrassingly simple. 😂 Thank you!

BBaptiste

😂

aandrade.vander

Hi, community and masters @Baptiste @cleveradmin
How to implement a webhook when api POST but body with form-data?

example:
curl --location 'https://domain.com?step=1&variation=default' \
--form 'uuid=""' \
--form 'field1=""' \
--form 'email="xpto@gmail.com"' \
--form 'telefone="12312"' \
--form 'checkbox_lgpd="on"'

Add a reply

Share feedback, ideas and get community help

Webhook - Multiple Variables