Webhooks and dynamic JSON key/value pairs

Matthew_Moran · ‎Dec 10, 2021

I am experimenting with Webhooks to move data back and forth between bases.

I just want to make sure what I am seeing/doing is necessary.

When I setup a test POST from an external tool to test the webhook, any data elements defined the JSON are created as values in javascript editor. However, I would prefer to read the entire json object as new fields may become necessary.

What I did was create an object that looked like this:

{ "theData" : "Anything" }

I tested the webhook and “theData” was available to the script editor.

I then created a more representative object like this:

{ "theData" : {
   "fieldOne" : "Some data",
  "fieldTwo" : "More data",
  "fieldThree" : "and even more data"
}
}

This works fine and my code is working. Is this how I have to set it up?

If I send the second structure as a test, the script editor forces me to select one of the nested fields. I cannot select the top level key.

It’s not the worst thing to have to do but it does seem like a bit of an extra step.

Thanks.

Justin_Barrett · ‎Dec 10, 2021

That’s unfortunately the current limitation of the webhook trigger. However, you can actually work with that and get what you want.

In short, you stringify your main object, then stringify it again when inserting into the body of the request. Here’s a quick example that I just tested:

const hookUrl = "https://hooks.airtable.com/workflows/v1/genericWebhook/..."

const myObject = {
    "fieldOne": "Some data",
    "fieldTwo": [1, 2, 3],
    "fieldThree": {
        first: true,
        second: "blah",
        third: 19
    }
}
const options = {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        data: JSON.stringify(myObject)
    })
}

const response = await remoteFetchAsync(hookUrl, options)
if (response.ok) {
    output.text("OK")
} else {
    output.text("Not OK")
}

On the receiving end, you only have a single data item to pass to your script, which is the string version of your original object. Turn it back into the original object using JSON.parse():

const {data} = input.config()
const myObject = JSON.parse(data)
console.log(myObject)

See Solution in Thread

Justin_Barrett · ‎Dec 10, 2021

That’s unfortunately the current limitation of the webhook trigger. However, you can actually work with that and get what you want.

In short, you stringify your main object, then stringify it again when inserting into the body of the request. Here’s a quick example that I just tested:

const hookUrl = "https://hooks.airtable.com/workflows/v1/genericWebhook/..."

const myObject = {
    "fieldOne": "Some data",
    "fieldTwo": [1, 2, 3],
    "fieldThree": {
        first: true,
        second: "blah",
        third: 19
    }
}
const options = {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        data: JSON.stringify(myObject)
    })
}

const response = await remoteFetchAsync(hookUrl, options)
if (response.ok) {
    output.text("OK")
} else {
    output.text("Not OK")
}

On the receiving end, you only have a single data item to pass to your script, which is the string version of your original object. Turn it back into the original object using JSON.parse():

const {data} = input.config()
const myObject = JSON.parse(data)
console.log(myObject)

Matthew_Moran · ‎Dec 11, 2021

Thanks… Yep… I sent the complete object after testing it without the additional key/pairs and it works. Just of a strange feature.