How to Get Line Items/Arrays into Code Steps

  • 9 December 2020
  • 14 replies
  • 8526 views
How to Get Line Items/Arrays into Code Steps
Userlevel 7
Badge +3
  • Zapier Staff
  • 21 replies

Tim here from the Zapier Support Team with a workflow idea!

Background

If you’re familiar with the Code by Zapier app, you’re probably used to working with all kinds of values, including arrays. In Zapier, arrays are generally called “Line Items” and sometimes it can be tricky to get them into a Code Step unscathed to run them through some custom process.

Why is it difficult? All values added to the `Input Data` fields of a Code Step are converted into Strings and sent into the Code Step in that format. Arrays / Line Items get converted into Strings that are comma separated values. While it’s definitely possible to split those comma separated values back into arrays inside the code, we run into problems if the values themselves contain commas.

To further complicate things, if we’re sending multiple properties of line items (multiple arrays that relate to each other) and some of the arrays have `null` or empty values, those will be completely dropped, so it can cause our input data to become misaligned.

So how can we work around this?

The Feature Request

First, please write in to support to ask to add your voice to the feature request that we have open to support proper line item input in the Input Data fields for the Code by Zapier Actions.

The Solution

For now, we can use the Formatter by Zapier app’s Utilities Action: Line-item to Text Transform to help us out. 

Note: The Code below is in Javascript but this can be adapted for Python Code Steps as well.

Let’s look at our input values first:

I’ve added an “easy” input first to show how we’d normally get arrays into a Code Step where we don’t need more help. There is also an example with a comma in an element, and another with a null element.

Here’s our default Code Step trying to turn the strings back into arrays:


Let’s take a look at the output:


As we can see, the array with comma containing element now has 4 elements instead of 3 as the green,blue element was split up. The array with the null element has lost that element, reducing it from 4 elements to 3.

Let’s add a Formatter Utilities Action: Line-item to Text Transform to add our own delimiter:


This gives us a text output with a different delimiter: 


Now we can run this through the Code Step:


And we get the result we wanted where the value with a comma doesn’t get split into multiple elements:

 

Let’s go back and create another Formatter Utilities Action: Line-item to Text Transform to take care of the array with the null value in it. This time, we also add a `-` after the line item input. 

 

It could be any single character, and what it does is it adds the text - to each element of the line item/array, even the null elements, so that those aren’t dropped. Here’s the output:

 

Now we can split on our custom delimiter and then remove the last character from each element inside the Code Step. Here’s how we do that:

 

The slice(0,-1) returns the string with the last character removed, so we can get back to our original elements. Here’s our fixed output with the null element in tact:

Here’s that final code snippet if you want to copy it and try it out:

const {
  lineItemEasy,
  lineItemWithComma,
  lineItemWithNull,
} = inputData;

const lineItemEasyArray = lineItemEasy.split(',');
const lineItemWithCommaArray = lineItemWithComma.split('|||');
const lineItemWithNullArray = lineItemWithNull.split('|||');
const lineItemWithNullArrayFixed = lineItemWithNullArray.map((element) => {
  return element.slice(0,-1);
});

output = [{
  lineItemEasyArray,
  lineItemWithCommaArray,
  lineItemWithNullArrayFixed,
}];

Once you have your Line item values inside your code step with all elements preserved properly, it will be easier to write code to process them in various ways.

Bonus: For a slightly more advanced approach to the above problem but for multiple, related line-item properties, you can also take a look at the answer to the question that inspired this post here: 

I hope these workarounds help you make more use of the Code by Zapier app!

Tim

 

Please Note

This code is provided as is, without warranty, but we’ll do our best to answer questions you have about it here.

Supporting custom code is outside of the scope of Zapier Support, so if you need help with this, or other code you’re working on, the best place to ask is here in the Zapier community and/or on Stack Overflow. You’re still welcome to ask in Support via our contact form just in case it’s something unrelated to the code that isn’t working, but you may be directed to one of these resources to get help from the community. 


14 replies

Userlevel 1

Man, finding this step very useful to workaround.

Now we are 9 months later nothing has been done yet… hum

Userlevel 7
Badge +11

Hey @FabienK,

Glad to hear you’re making good use of Tim’s suggested workaround! :)

I’ve added your vote to the feature request to support line item input on Code by Zapier steps. We don’t have an ETA on this but we’ll be sure to contact you by email as soon as it’s added! 

Userlevel 1

Line Item input data would be fantastic

Userlevel 7
Badge +9

Heard, @WAV-Tech! I went ahead and got your vote added to that feature request as well. We’ll be sure to keep you and the thread updated if this gets implemented. 🙂

Userlevel 1

I try this code:

 

const {
  productname,
  productdescription,
  productprice,
  productquantity,
  productsum,
  productdiscount,
  producttotal,
  productcode,
} = inputData;

const productnameArray = productname.split(',');
const productdescriptionArray = productdescription.split(',');
const productpriceArray = productprice.split(',');
const productquantityArray = productquantity.split(',');
const productsumArray =  productsum.split(',');
const productdiscountArray =  productdiscount.split(',');
const producttotalArray = producttotal.split(',');
const productcodeArray = productcode.split(',');

output = [{
  productnameArray,
  productdescriptionArray,
  productpriceArray,
  productquantityArray,
  productsumArray,
  productdiscountArray,
  producttotalArray,
  productcodeArray,
}];

 

But returns TypeError: Cannot read property 'split' of undefined.

Any ideas?

Userlevel 1

When I leave only one Key it works ok.

However in this case I still get the output as an array, rather than separate values.

Any idea how I can split it into separate values properly?

Ideally I want to get from

Product Names: Product Name 1, Product Name 2, Product Name 3

to output which is 

Product Name 1

Product Name 2

Product Name 3

 

I want to add them to a Google Docs which has

{{productname1}}

{{productname2}}

{{productname3}}

So I need the output of each value separately, not of each array. I am not sure I am explaining well :(

Just searched for a full workday trying to find this workaround, thanks for the write-up Tim! But yes, this was very frustrating trying to decipher whether it was my code or the incoming data that was incorrect. Please fix this!

When I leave only one Key it works ok.

However in this case I still get the output as an array, rather than separate values.

Any idea how I can split it into separate values properly?

Ideally I want to get from

Product Names: Product Name 1, Product Name 2, Product Name 3

to output which is 

Product Name 1

Product Name 2

Product Name 3

 

I want to add them to a Google Docs which has

{{productname1}}

{{productname2}}

{{productname3}}

So I need the output of each value separately, not of each array. I am not sure I am explaining well :(

This is exactly what I was hunting for and needed today as well, Id also love to see this as an inclusion in the already-awesome Formatter that i overuse daily.

Userlevel 1

Please add my vote to support proper line item input in the Input Data fields for the Code by Zapier Actions.

Userlevel 6
Badge +3

Hi @brianball 

 

I’ve added your vote for this feature request and we’ll be sure to keep you and the thread updated if this gets implemented. 

Thanks for the workaround - I would love to see this get native support as well 🙏

Userlevel 6
Badge +3

Hi @joellabes 

I’ve added your vote for this feature request and we’ll be sure to keep you and the thread updated if this gets implemented. 

Thanks for the work around :) 

 

Any news on this feature? If not, I would love to see this getting native as well :) 

Userlevel 1

Just ran into this when attempting to consume some complex array data (a GraphQL request) from a webhook request on the JavaScript code step.

 

This is really strange behaviour. Why not just provide an option to be able to use the whole decoded JSON response data in the inputData variable (or whatever data is feeding the step) and let users interact with it? I have no knowledge of your backend obviously, but from the outside it seems like a lot of unnecessary overhead to post-process and flatten all arrays into a CSV and output them in a select list on the frontend, then mapping those to a key-value pair, to finally then inject those into the code script.

 

An option to simply access all the JSON decoded data without Zapier’s post-processing would be killer. Anyone with any code experience would have a way better experience without having to use a GUI to manually map key->value pairs of their flattened and transformed data, to then have to transform it back into an array by exploding it using a comma (or custom delimiter) 🙃.

 

This workaround is moot with any level of data complexity provided to the code step.

Reply