Shuffle Array Of JavaScript Objects And Its Children Arrays

In a given JavaScript array of objects, which have nested array of objects within them too, we want to shuffle all the arrays within it in a random order, however deeply nested they are. For this we need a shuffle method. It could be our own implementation (for instance, using JavaScript Math.random()), or some some library like lodash that provides the shuffle method.

Code

The deepShuffle method takes an array in argument (familyTree in below example), and returns a new array that has its root and nested arrays shuffled. Each object of array in our example has a possible children node, that is an array of objects too.

const _ = require('lodash');

const familyTree = [
  {
    id: "2559dbff",
    name: "Williams",
    age: 50,
    children: [
      {
        id: "5c0f3094",
        name: "Peter",
        age: 20
      },
      {
        id: "c1484221",
        name: "Hilda",
        age: 32,
        children: [
          {
            id: "2fgd866e",
            name: "Steve",
            age: 14
          },
          {
            id: "e47927ad",
            name: "Hester",
            age: 15
          }
        ]
      },
      {
        id: "8a265c23",
        name: "MgGrath",
        age: 25
      }
    ]
  },
  {
    id: "5366472b",
    name: "Joseph",
    age: 70,
    children: [
      {
        id: "b14a960c",
        name: "Julie",
        age: 45,
        children: [
          {
            id: "ff3c260c",
            name: "Mathew",
            age: 23
          },
          {
            id: "7c60920a",
            name: "Claire",
            age: 25           
          }
        ]
      }
    ]
  },
  {
    id: "5a4bdc98",
    name: "Robert",
    age: 62,
    children: [
      {
        id: "014r62a3",
        name: "Adrian",
        age: 40
      },
      {
        id: "a1879541",
        name: "Spencer",
        age: 30
      }
    ]
  }
];



const deepShuffle = (arr) =>{
  if(!arr || arr.length){
    return _.shuffle(arr).map(a=>{
      if(a.children){
        a.children = deepShuffle(a.children);
      }
      return a;
    })
  }
  return arr;
}


deepShuffle(familyTree)

We can verify from the result array that the shuffling has been done at all levels of the family tree:

[
  {
    "id": "5366472b",
    "name": "Joseph",
    "age": 70,
    "children": [
      {
        "id": "b14a960c",
        "name": "Julie",
        "age": 45,
        "children": [
          {
            "id": "7c60920a",
            "name": "Claire",
            "age": 25
          },
          {
            "id": "ff3c260c",
            "name": "Mathew",
            "age": 23
          }
        ]
      }
    ]
  },
  {
    "id": "5a4bdc98",
    "name": "Robert",
    "age": 62,
    "children": [
      {
        "id": "014r62a3",
        "name": "Adrian",
        "age": 40
      },
      {
        "id": "a1879541",
        "name": "Spencer",
        "age": 30
      }
    ]
  },
  {
    "id": "2559dbff",
    "name": "Williams",
    "age": 50,
    "children": [
      {
        "id": "c1484221",
        "name": "Hilda",
        "age": 32,
        "children": [
          {
            "id": "e47927ad",
            "name": "Hester",
            "age": 15
          },
          {
            "id": "2fgd866e",
            "name": "Steve",
            "age": 14
          }
        ]
      },
      {
        "id": "8a265c23",
        "name": "MgGrath",
        "age": 25
      },
      {
        "id": "5c0f3094",
        "name": "Peter",
        "age": 20
      }
    ]
  }
]

The Algorithm Explained

  • We start from the root array. We check for the length of the existence and length of the array parameter. If it’s greater than 0, we proceed, else return the array as is.
  • We apply shuffle to it and map through the resulting array. For each element, we check if children node is present. If so, we recursively call deepShuffle with children and assign the shuffled result to element’s children node (since we’re using lodash shuffle, which returns a new array rather than modifying the original, we need to assign the shuffled array)

See also