Way to random sort airtable records

Ask the community
1

Few of our community members asked if there is way to randomly sort airtable records while displaying them in softr lists.

While airtable is not providing an easy way to do it we have developed small code snippet to be injected in the page header area which will randomly sort the records which are being displayed to the end user.

Check the code below:

2

This snippet needs to be injected into the page settings custom code header area.

<script>
   document.addEventListener("DOMContentLoaded", function () {
       /* Intercept into Airtable call */
       $.ajaxSetup({
           dataFilter: function (data, type) {
               if(type === 'json' && data) {
                   console.log(data);
                   const jsonData = JSON.parse(data);
                   if(jsonData.records && jsonData.records.length > 0) {
                       shuffleArray(jsonData.records);
                       data = JSON.stringify(jsonData);
                   }
               }
               return data;
           }
       });
       function shuffleArray(array) {
           for (var i = array.length - 1; i > 0; i--) {
               var j = Math.floor(Math.random() * (i + 1));
               var temp = array[i];
               array[i] = array[j];
               array[j] = temp;
           }
       }
   });
</script>
3

Am I right it will only randomize the results on a page. If you look at this page: https://www.donateursbelangen.nl/zoeken

The first 9 results are randomized but the number 10 item after MORE will always be number 10 after hitting the more button.

So this is only randomizing the first 9 results.

Am I correct?

4

Correct it’s only doing randomisation against the retrieved data.

5

Okay. Good to know but this way you can’t use it as the results above the number shown on the page will never be random and will never show up on the first page result. Having to delete this code.

Any way of getting random results from an airtable?

We would like to show 1 non-profit in the spotlight (random) on the homepage of the website.

6

Hey @artur, I’ve pasted your code snippet into the header of my page but it doesn’t seem to be working. Did the Airtable API’s change or is there another reason you can think of?

7

@Yaya
I spoke to support in chat and they provided me with an updated snippet, it should work :

<script>
(function(open) {
      XMLHttpRequest.prototype.open = function() {
        this.addEventListener('readystatechange', function() {
          if (this.readyState === 4) {
            try {
              const data = JSON.parse(this.responseText);
          
              if (Array.isArray(data?.records)) {
                shuffleArray(data.records);
               
                Object.defineProperty(this, 'responseText', {
                  writable: true,
                  value: JSON.stringify(data)
                });
              }
            } catch (e) {
              console.error('Error while shuffling data:', e);
            }
          }
        });
        open.apply(this, arguments);
      };
    })(XMLHttpRequest.prototype.open);

    function shuffleArray(array) {
           for (var i = array.length - 1; i > 0; i--) {
               var j = Math.floor(Math.random() * (i + 1));
               var temp = array[i];
               array[i] = array[j];
               array[j] = temp;
           }
       };
</script>
8

@flavi Works like a charm, thank you! :pray:

9

This is the functionality I’m needing.

10

So this is not receiving random records from airtable, right? This just randomly sorts the in my case 12 records it receives. Or am I doing something wrong?

i.e. i have 500 records sorted alphabetically in airtable, i want softr to display 12 records from that table randomly. When i use the script it merely shuffles the first 12 records from that table, and disregards the other 488 records from the table…

11

Hi,
Thanks for the code that works very well.
Is it possible, if there are 2 dynamic blocks on the page, to apply it only to one of these 2 dynamic blocks?
Thanks !

12

Hello, this one is not working. Once I click load more, the new items are not sorted randomly. Any solution ?

13

@artur the above script doesn’t seem to work for the new list blocks, it doesn’t randomize

Are you able to provide an updated version of the script?

14

So I haven’t tried the script, but there is one thing that you can do if you want to randomize the displayed records: actually have a field in your Airtable table that is a record ID field and sort in Softr based on that field.

Because the record ID is randomly generated, these records will appear in a random order.

That being said, it will not reshuffle them as you reload the page. If that is something that you want to build, maybe fixing that script would be one way.

I also wanted to highlight that you could even build more custom interfaces with the vibe coding block, where you could also get features like a nice button called “Randomize” where it would reshuffle the values, etc., if you’re looking to build such experiences.

15

Thank you for the response! But not exactly what I am looking for with the recordID.

I want the list to auto-shuffle when a page is loaded so users get a random different record at the top of the list each time. This is what the original script was doing before it stopped working on the new blocks.

Hopefully Softr can provide an updated version of the script that works with the new blocks :folded_hands: