How to randomize the property order of an array of objects in Javascript

Question

I have an array of objects with 11 properties and I want to shuffle the properties appearing in the array in a random way.

To be clear, the order of the array objects will be the same. I want to randomize the properties order inside the object and keep this order for every object.

Here is a sample of my Array:

I tried looking for any other solution to similar problems but most of them were rearanging the object whereas I need to randomize the properties

var list = [
{
    "ID": 0,
    "Name": "Mark",
    "Address": "2323 st",
    "Phone": 511 232 2000,
    "Score": 345
},
{
    "ID": 1,
    "Name": "Catrina",
    "Address": "2323 st",
    "Phone": 511 232 2100,
    "Score": 3452
} //and 1000 more objects...

And this is what I am looking for (the order should be rearranged when clicking a button)

var list2 = [
{
    "Score": 345
    "Name": "Mark",
    "Address": "2323 st",
    "ID": 0,
    "Phone": 511 232 2000, 
},
{
    "Score": 3452
    "Name": "Catrina",
    "Address": "2323 st",
    "ID": 1,
    "Phone": 511 232 2100,  
} //and 1000 more objects...

I want to get an output of list2 with the same data but in a random property order. The randomize function would be called whenever someone clicks a button, this I'll be able to do once I find a way to have a function the does what I want.

Answer 1

If you are talking about randomly shuffling your array, below is how to do so:

function shuffle(array) {

  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

Answer taken from here

Answer 2

Whenever you create a new object, the order in which you declare its properties is the order in which they appear when printed to the console or in string format via JSON.stringify().

 var list = [ { "ID": 0, "Name": "Mark", "Address": "2323 st", "Phone": "511 232 2000", "Score": 345 }, { "ID": 1, "Name": "Catrina", "Address": "2323 st", "Phone": "511 232 2100", "Score": 3452 }] function remap(d) { const {ID, Name, Address, Phone, Score} = d; return {Score, Name, Address, ID, Phone} } console.log(list.map(remap)) 

And, presuming that the key order should be the same for each item in a given list, one approach is to enclose the code managing the randomisation inside a function working as closure. Going for functional constructs as it makes the code more compact.

 var list = [{ "ID": 0, "Name": "Mark", "Address": "2323 st", "Phone": "511 232 2000", "Score": 345 }, { "ID": 1, "Name": "Catrina", "Address": "2323 st", "Phone": "511 232 2100", "Score": 3452 } ] function randomizePropertyOrder() { // If we want the property order to remain the same throughout the list // we must declare it inside some closure let propsOrder; // quick way to randomize any list of items. function randomizeList(list) { return list .map((k, i) => { return { k, i: Math.random(); } }) .sort((a, b) => { return ai - bi; }) .map((d) => { return dk; }) } return (d) => { // let's compute a random property order once and only once if (propsOrder === undefined) { propsOrder = randomizeList(Object.keys(d)) } return propsOrder.reduce((acc, k) => { acc[k] = d[k]; return acc; }, {}) } } const remap = randomizePropertyOrder() console.log(list.map(remap)) 

Answer 3

A bit late to the party.

How about using Durstenfeld shuffle , since you want completely random. This is computer-optimized since your list could be long and you do not want the main thread to block/slow down.

 var list = [ { "ID": 0, "Name": "Mark", "Address": "2323 st", "Phone": 5112322000, "Score": 345 }, { "ID": 1, "Name": "Catrina", "Address": "2323 st", "Phone": 5112322100, "Score": 3452 } ]; var list2 = list.slice();//making replica randomizeList(list2); console.log(list2); console.log(list); function randomizeList(list2) { for (var i = list2.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = list2[i]; list2[i] = list2[j]; list2[j] = temp; } }