How to concatenate two arrays into one in Server Actions? (NodeJS)

Unless you want to have some dynamic generated functions I would just suggest creating custom modules/formatters instead of evaluating javascript.

exports.concat = function(arr1, arr2) {
  if (!Array.isArray(arr1)) arr1 = [arr1];
  if (!Array.isArray(arr2)) arr2 = [arr2];
  return arr1.concat(arr2);

Indeed @patrick @George if it’s just for that that’s the perfect solution but it can become cumbersome at some points to create formatters and modules for each single small thing. Specially if there are infinite ways of using a function(think .map())

I was thinking about actually creating a feature request to create a very advance nodejs module that allows running any type of javascript while being able to parse SC expressions. All this from within secured sandbox.

Sometimes you just need to quickly map an array with a custom function or you want to loop through something without having to go through the hassle of creating a custom module/formatter and the hjson that is sometimes very rigid as to what it accepts as options.

What do you think? Would you guys be open to create such custom action by creating a new parser function that can identify what are SC bindings and what is vanilla JS code and execute it in a safe sandbox(i.e. vm2)?

I believe the great majority of low-code solutions out there have some sort of component that allows the end users to run custom JS and inserting their own bindings and I have to assume they do this by using a sandbox.


I can relate to this. In one of my projects, I have around 7 formatters, and most of them are just one single JS function - but I must admit - all of them have some custom tweak.

Not sure how the proposed solution will work, but it sounds like a good tool to have in Wappler’s arsenal.

1 Like


What about just passing an Object to the custom module and the snippet textarea, and then return the Object modified? Sounds like a good compromise between passing SC variables to inside the sandbox and getting them back. With an Object we can pass practically anything we want without worrying about token parsing and stuff, what do you think?

A Wappler bonus would be to have syntax highlighting in such module textarea

I don’t quite get you? What does the object contain?

Assuming the array concat example, you create this object in a Server Action:

// obj
    arr1: [1,2], 
    arr2: [3,4]

Module user input variable name:


Module user input snippet (textarea):

return obj.arr1.concat(obj.arr2); // returns an array [1, 2, 3, 4]

The module returns a variable (in this case, an array). It could also return an Object or whatever you need

I guess we could even expand whatever inside obj to the global scope within the sandbox:

return arr1.concat(arr2);

Yes, but why would I want to perform that action in SC?

Isn’t that the equivalent of creating a Set value action in SC and assigning it a [1,2,3,4] value directly?

If the values are static and known to us we don’t need to execute any javascript to return the final result, right?

A different way of putting it. The purpose of this would be to run custom JS code that interacts with the rest of SC, specially the bindings that include dynamic data, right? Like data that comes from a DB, an API, a SC action, etc

Yes! I thought we were on the same page. I’m referring to the module you’ve created where you run the sandbox. The point is an easier way to pass dynamic data to inside the sandbox, and get it back to Wappler, avoiding the whole token parse thing

1 Like

Ok. I got the feeling that you might be missing some piece from the whole SC puzzle and I am not doing a great job at explaining which one it is.

Every SC flow is just one JSON file that contains information that will be read and processed by the SC framework. So when you add data to any type of field in a SC action you are just adding data to the json file. This means that when we use the “Run custom JS” step action and fill the code field you are adding the expression that will be evaluated, and not the data itself(unless it’s static).

But if the two arrays that I am concatenating come from a dynamic source(i.e an API) it will store in the json file two expressions in moustache notation {{this}} and {{that}}. SC will then read the json file and when it gets to that part it will evaluate those expressions and for that it uses a parser which in turn uses the lexer.

Don’t get me wrong. I understand your approach by separating data from the JS string and I’ll iterate on that idea tomorrow but I think it’s not as easy as it seems because eventually you need to parse the binding.

Edit: On second thoughts you might be on to something :slight_smile: I’ll spare some time tomorrow for sure.

1 Like

I couldn’t wait. I had to try your approach. I also remembered about the grid control. It’s perfect for this.




Great suggestion buddy!

1 Like


You can either create a specific custom formatter as suggested by patrick being the most elegant solution for Wappler.

exports.concat = function(arr1, arr2) {
  if (!Array.isArray(arr1)) arr1 = [arr1];
  if (!Array.isArray(arr2)) arr2 = [arr2];
  return arr1.concat(arr2);

Or you can go with the RunJS custom module which will achieve exactly the same by running custom JS but implies running an additional step. With the formatter you can just chain the function where you need it.

Both solutions are more performant than the workaround you found out.

1 Like

Just test it, that’s really awesome and easy to use, thank you very much!
It definitely will help me a lot in work and save a lot of time and effort.

Why has nobody made this tool before? :slight_smile:

1 Like

Nobody asked for it :slight_smile:

1 Like

@JonL, @sid, @Apple, @nickneustroev, @Teodor, @George
An amazing discussion I just stumbled across !
So, @JonL, this is now a module you created for Wappler developers to use when the occasion arises?
Fantastic contribution and thanks to @Apple for his “think-tanking”!

You know, I see people from time to time, pooh-poohing “vanilla” JS and jquery.

But if you look through many libraries of frameworks or extensions and CSS extensions you find many of them are depending on JS “native” and/or jquery libraries to help their Node.js project complete its job.

Popular sites using jQuery

Respect . .

And now the WrapUp – @JonL has worked on and contributed this Wappler Extension in 2022

I want to refresh its availability to Wappler Forum readers this March 6, 2022
@JonL has made valuable contributions of time and sweat that help make projects easier or possible with his extensions. Actual dinero contributions might not be out of line.

1 Like

That’s already possible using the Server Connect Array List component:

This topic was automatically closed after 26 hours. New replies are no longer allowed.