What's new?
Product
Who uses Directual?
What can be built on Directual
Learn Directual
Why Directual?
Resources
Legal
Company

Using Lodash and Sorting Arrays in Directual

June 28, 2023

We all know that no-code development aims to simplify the process of creating applications without traditional coding techniques. One of the tools that no-code developers use is Lodash — a JavaScript library with functions that make working with arrays, objects, and functions a breeze. This lesson explains how to use the Lodash JavaScript library for sorting arrays in Directual.

Task

Let's say you have an array link that you created using the Find object step, and now you need to sort this array and make a list that contains the following information in a specific order:

  • Name
  • Age

The Find object step allows you to search for objects in different data structures. It also can:

  • Save objects as an array link
  • Count objects
  • Sum objects up by a specific field
  • Compose an array of their fields

Data structures

Let's use a data structure called Users as an example. It has only three fields:

  • ID (object ID)
  • Name
  • Age

Now let’s create a new data structure and name it My_struct. This data structure also has three fields:

  • ID
  • User IDs (an array link to the Users structure)
  • Users to Display (an array you will use to make the list)
Data structure fields configuration
A typical example of an object

Scenarios

Now you need a scenario to do all the heavy lifting for you.

Create a new Scenario. Next, in the Edit object step, select the Users_to_display structure. Enable Coding Mode and type the following expression:

_.sortByAll([ {{#user_ids}} { name: "{{name}}", age: {{age}} }, {{/user_ids}} ], ["age"]).map(function(i) { return i.name + ' – ' + i.age + ' years old' }).join(',')

Please note that we don't need double quotes around {{age}}, because the value is number. Following the JS-notation we don't quote numbers and booleans.

This expression allows you to apply the sortByAll method to the array, then collect an array of strings, and, finally, with the help of the join function, to convert a JS array into a Directual array.

Please note! Directual is only compatible with Lodash version 3.10.1.

Important! Don't forget that arrays and array links in a Directual database are strings, where the elements must be separated by a comma. To convert a JS array to a Directual array, use the .join(",") function, and the split(",") function to convert it back.

Okay, now run the object through the scenario. Glorious, isn't it?

You can also use templating for the array to make it look even nicer:

Configuring sorting order

You can use the sortByOrder method to change the order in which items are sorted:

Use `desc` - for sorting in descending order and `asc` - for sorting in ascending order.

The expression shall look like this:

_.sortByOrder([ {{#user_ids}} { name: "{{name}}", age: {{age}} }, {{/user_ids}} ], ["age"], ["desc"]).map(function(i) { return i.name + ' – ' + i.age + ' years old' }).join(',')

This is how the result looks now

Afterword

There's a lot of cool stuff you can do with Directual and Lodash. Go ahead, experiment! If you get stuck, don't hesitate to ask for help in our No-code Community. Also, check out our 101 crash course to learn more about Directual and its features.

FAQ

What is Lodash?
What is Lodash?

Lodash is a JavaScript library that provides utility functions for common programming tasks using the functional programming paradigm.

What is an array?
What is an array?

An array is a collection of items, or data, stored in contiguous memory locations, also known as database systems.

Can I use Lodash and Directual together?
Can I use Lodash and Directual together?

Yes, you can. But keep in mind that Directual supports version 3.10.1 of Lodash.

Meet & greet like-minded no-coders

Hop into our cozy community and get help with your projects, meet potential co-founders, chat with platform developers, and so much more.