Typebot•2y ago

Webhook - Multiple Variables

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.

[
  {
    "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
    }
  }
]

[
  {
    "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.

13 Replies

Baptiste•2y ago

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)) This is for Names You can do the same for URLs Check out the Movies recommendation template for reference

cleveradminOP•2y ago

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.

cleveradminOP•2y ago

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)

{
  "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": ""
    }
  ]
}

{
  "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": ""
    }
  ]
}

typebot-export-typeb...

Baptiste•2y ago

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

cleveradminOP•2y ago

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.

Baptiste•2y ago

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

cleveradminOP•2y ago

All items. 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.

Baptiste•2y ago

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

cleveradminOP•2y ago

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

Baptiste•2y ago

to have it as a list of bullet points: '- ' + {{My list}}.join('\n- ')

cleveradminOP•2y ago

That is embarrassingly simple. 😂 Thank you!

Baptiste•2y ago

😂

Unknown User•2y ago

Message Not Public

Gaming

Programming

Webhook - Multiple Variables

Did you find this page helpful?