Typebot•7mo 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•7mo 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

cleveradmin•7mo 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.

cleveradmin•7mo 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": "jsmith@encore.com",
      "phonenumber_preferred": "+1 4035551234",
      "phonenumber": "",
      "mobilenumber": "+1 4031111234"
    },
    {
      "name": "Jennifer Jones",
      "client_name": "Gotham Insurance Group",
      "emailaddress": "jjones@gotham.com",
      "phonenumber_preferred": "403.123.4567",
      "phonenumber": "403.666.6666",
      "mobilenumber": ""
    }
  ]
}

{
  "data": [
    {
      "name": "Jennifer Smith",
      "client_name": "Encore Projects Inc",
      "emailaddress": "jsmith@encore.com",
      "phonenumber_preferred": "+1 4035551234",
      "phonenumber": "",
      "mobilenumber": "+1 4031111234"
    },
    {
      "name": "Jennifer Jones",
      "client_name": "Gotham Insurance Group",
      "emailaddress": "jjones@gotham.com",
      "phonenumber_preferred": "403.123.4567",
      "phonenumber": "403.666.6666",
      "mobilenumber": ""
    }
  ]
}

typebot-export-typeb...

Baptiste•7mo 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

cleveradmin•7mo 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•7mo ago

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

cleveradmin•7mo 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•7mo ago

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

cleveradmin•7mo ago

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

Baptiste•7mo ago

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

cleveradmin•7mo ago

That is embarrassingly simple. 😂 Thank you!

Baptiste•7mo ago

😂

Unknown User•7mo ago

Message Not Public

Gaming

Programming

Webhook - Multiple Variables