Shuffle Array of Objects in JavaScript Based on Specific Property

Question

Shuffle Array of Objects in JavaScript Based on Specific Property

Suppose I have a JavaScript array that looks like this:

arrTest = [
  {qId: 1, text:"test a", order: 1},
  {qID: 2, text:"test b", order: 2},
  {qID: 3, text:"test c", order: 3},
  {qID: 4, text:"test d", order: 4}
];

My goal is to randomize only the values in the 'order' key while keeping all other keys unchanged and preserving the original order of the array:

arrTest = [
  {qId: 1, text:"test a", order: 3},
  {qID: 2, text:"test b", order: 1},
  {qID: 3, text:"test c", order: 4},
  {qID: 4, text:"test d", order: 2}
];

I've come across various discussions and functions for randomizing arrays, but none seem to specifically target a single key while leaving everything else intact.

If you have any advice or solutions, it would be greatly appreciated!

Thank you in advance!

javascript arrays random key associative-array

Answer 1

Answer №1

If you're looking to shuffle the order of elements in an array and assign random values back to the property, one approach could be to map the 'order' property and then randomly assign a value from that mapping.

var arrTest = [{ qId: 1, text:"test a", order: 1 }, { qID: 2, text:"test b", order: 2 }, { qID: 3, text:"test c", order: 3 }, { qID: 4, text:"test d", order: 4 }],
    random = arrTest.map(({ order }) => order);
    
arrTest.forEach(o => o.order = random.splice(Math.floor(Math.random() * random.length), 1)[0]);

console.log(arrTest);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you're looking to shuffle the order of elements in an array and assign random values back to the property, one approach could be to map the 'order' property and then randomly assign a value from that mapping.

var arrTest = [{ qId: 1, text:"test a", order: 1 }, { qID: 2, text:"test b", order: 2 }, { qID: 3, text:"test c", order: 3 }, { qID: 4, text:"test d", order: 4 }],
    random = arrTest.map(({ order }) => order);
    
arrTest.forEach(o => o.order = random.splice(Math.floor(Math.random() * random.length), 1)[0]);

console.log(arrTest);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Utilize the Array.map() method to extract the order, then shuffle the order array using a technique from this solution, and finally use Array.map() to apply the new order to the original array:

const arrTest = [{"qId":1,"text":"test a","order":1},{"qID":2,"text":"test b","order":2},{"qID":3,"text":"test c","order":3},{"qID":4,"text":"test d","order":4}];

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
  }
  
  return array;
}

const result = shuffle(arrTest.map((o) => o.order))
  .map((order, i) => ({
    ...arrTest[i],
    order
  }));
  
console.log(result);

Answer 4

Utilize the Array.map() method to extract the order, then shuffle the order array using a technique from this solution, and finally use Array.map() to apply the new order to the original array:

const arrTest = [{"qId":1,"text":"test a","order":1},{"qID":2,"text":"test b","order":2},{"qID":3,"text":"test c","order":3},{"qID":4,"text":"test d","order":4}];

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
  }
  
  return array;
}

const result = shuffle(arrTest.map((o) => o.order))
  .map((order, i) => ({
    ...arrTest[i],
    order
  }));
  
console.log(result);

Answer 5

Answer №3

When faced with a similar challenge, I often turn to the robust capabilities of the lodash library (https://lodash.com/docs). This versatile tool offers a wide range of functions that I find invaluable in my JavaScript projects. Below is an example of how I utilized lodash for this specific task:

_(arrTest)
   .map(element => element.order)
   .shuffle()
   .each( (order, index) => arrTest[index].order = order);

console.log(arrTest);

Answer 6

When faced with a similar challenge, I often turn to the robust capabilities of the lodash library (https://lodash.com/docs). This versatile tool offers a wide range of functions that I find invaluable in my JavaScript projects. Below is an example of how I utilized lodash for this specific task:

_(arrTest)
   .map(element => element.order)
   .shuffle()
   .each( (order, index) => arrTest[index].order = order);

console.log(arrTest);

Shuffle Array of Objects in JavaScript Based on Specific Property

Answer №1

Answer №2

Answer №3

Similar questions

How can I transfer data from an API response containing an array of objects to a new array in a Vue.js

What is the most effective approach for integrating an edit feature into my React component?

When the text overflows from the div, place it on a new line to ensure readability

What is the best way to use JavaScript to locate and interact with a button on a webpage based on its XPath and the text it contains?

The default ng-selected option fails to show up in the form POST without any modification

The D3 path is generating an unexpected output of 0px by 0px, causing the map not to display properly. I am currently unsure how to adjust the projection to

Ways to conceal the current state changes from being displayed in the URL

Trouble with sending data from jQuery Ajax to Node.js server

Saving the AJAX response object in a global variable - Important fields are not being retrieved

How do I set up Firebase functions to trigger onWrite when listening for a specific child just once?

Learn how to serialize and submit all form components within a specified element using AJAX

What is the process for advancing an object in Three.js?

Tips for maintaining constant variables during React rendering

The parameter cannot be assigned because it is of type 'string | Date', not of type 'Date'

Evolution of table size

Troubleshooting a Tiny Bottom Sheet Problem in react-native

What is the process for extracting a .swf file from the Rails Asset Pipeline without using any helper methods?

What is the best way to relocate a child component to a different parent in React?

Could you offer assistance in resolving the error I am encountering with the collection.get() function?

Exploring the nuances of shimming dependencies with requireJS: comparing shorthand to longhand notation