Zapier - Catch Hook - JSON Array - Loop over each

Question

I need to use a Zapier webhook to take some incoming JSON data, which contains an array of items, loop that array and do an action for each element.

Here's a sample of incoming JSON data:

    {
            "first_name": "Bryan",
            "last_name": "Helmig",
            "age": 27,
            "data": [
                {
                    "title": "Two Down, One to Go",
                    "type": "Left"
                },
                {
                    "title": "Talk the Talk",
                    "type": "Right"
                },
                {
                    "title": "Know the Ropes",
                    "type": "Top"
                }
            ]
    }

The size of the array will be dynamic.

The problem is that when I import this data in the hook, it gives me

data
    title: Two Down, One to Go
    type: Left
    title: Talk the Talk
    type: Right
    title: Know the Ropes
    type: Top

So, basically it says that data is just a big string of all this stuff together.

Can anyone help me figure out if it's possible to have a Zap loop over this and do something, e.g., insert data into a sheet, for ever item in the array? I'm aware of the "Code" actions, I've chosen JavaScript, which I could parse out the string, but that doesn't seem efficient. Plus, in reality, there will be a lot of data in the objects inside the JSON array.

EDIT: SOLVED! ANSWER BELOW

Answer 1

So, the first part is to Catch Raw Hook for a trigger. It's the normal "Webhooks", but you have to click to show the less common variations. With the Catch Raw Hook, your data will not be turned automatically turned into variables via the Zapier app, you'll have the raw JSON data.

Once you have the raw JSON, in my case, you'll have an action, and this will be the "Code" action. I'm using JavaScript. In my template, I'm grabbing the entire JSON string (your whole imported JSON is a string right now, not an object, so we can't use "." (dot) notation to access parts of it).

You'll need to JSON.parse() the string in the code. But first, let me explain that Zapier has a pre-defined variable called inputData that you'll use in your code. Then in the top of the "Edit Template" section of your "Code" Action, you'll see you can name the variable of that JSON string you imported.

Now the fun part! In the code, you'll type:

// of course, you can change the variables to what you want
// but 'inputData' is unique, can't change that
const myData = JSON.parse(inputData.rawJsonData); 

So, my raw data is a string, it's not JSON yet, so this line of code makes it a JSON object. And now, as an object we can loop over it or .map or access 'this.that' or whatever you want.

The next important thing to mention about "Code" in Zapier, is that to get your stuff out, you return. So, in the next few lines, I'm going to return a .map function that returns each item in an array. And it's tough to grasp how Zapier treats this, but it actually runs the next "Action" you create (e.g. adding a row to a sheet) for each time you loop in that .map. So, let's take a look below:

return myData.data.map(item => {
    return item;
});

If you remember, I had an array called "data" in my raw JSON I listed in the original question. It will loop over that array and since I'm returning, then it will perform an "Add Row to Sheet" (in my case) for each loop, thus, inserting all of my data as multiple rows in my spreadsheet.

So the finished code:

const myData = JSON.parse(inputData.rawJsonData);

return myData.data.map(item => {
    return item; 
});