Zapier - Catch Hook - JSON Array - Loop over each item in array

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

This alternative will be of interest for some people coming here via search -- if you don't do "catch raw," [Zapier will parse the incoming fields,](https://stackoverflow.com/a/42890468/884640) and allow you to format those items into (any number of) Zap steps. — floer32, Jun 27 '19 at 19:49

score 4 · Accepted Answer · answered Sep 22 '18 at 14:13

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; 
});

I used this on may zap but it doesn't work as you mention. It instead returns both items as an object, so if you try to pull them in a zap it errors as it can only see a string. Or does the zap need to say it supports multiple returns? — littlecoder, Oct 10 '19 at 16:19
It's been about a year since I've been working with Zapier, so it's possible they could have changed things. You're using `Catch Raw Hook` right? Then `const myData = JSON.parse(inputData.rawJsonData);`? Then after that, you can run other JavaScript stuff. — Kenny, Oct 10 '19 at 16:31
Yeah I set it up exactly as you had it, I've seen others do something similar in the past and none of their options do this function anymore. Here is example output your code provides now as a zapier variable: (SomeDataDescription: "item1Sample, item2Sample"). So the next step grabs it as a line item it seems. — littlecoder, Oct 10 '19 at 16:39
Yeah, could have been updated possibly. I'd highly recommend reaching out to Zapier support, they're amazing and friendly. Otherwise, the old way was if you choose to get the raw data, it was a string of JSON data you had to parse out. — Kenny, Oct 10 '19 at 16:42
Found it, that function has been removed and a zap was created to add multiple rows in google sheets. Which is a shame because before we could have done this code and it work on any following zap. However, your code still works to parse the data and return an array of line items. — littlecoder, Oct 11 '19 at 19:26

Zapier - Catch Hook - JSON Array - Loop over each item in array

1 Answers1

Linked