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:
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>
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?
Correct it’s only doing randomisation against the retrieved data.
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.
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?
@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>
