Is there anyway i can shuffle an Array inside of an object

JavaScript
1

I got the nested options Array inside of the Questionlist Array of Objects, i need a way whenever i load the component for these Arrays to be shuffled , appreciate the help.

const QuestionsList = [

   {

     image: CountryAFlag,

     options: [

       { Answertext: CountryAName, IsitCorrect: true },

       { Answertext: CountryBName, IsitCorrect: false },

       { Answertext: CountryCName, IsitCorrect: false },

       { Answertext: CountryDName, IsitCorrect: false },

     ],

   },

   {

     image: CountryEFlag,

     options: [

       { Answertext: CountryGName, IsitCorrect: false },

       { Answertext: CountryFName, IsitCorrect: false },

       { Answertext: CountryEName, IsitCorrect: true },

       { Answertext: CountryHName, IsitCorrect: false },

     ],

   },

   {

     image: CountryIFlag,

     options: [

       { Answertext: CountryJName, IsitCorrect: false },

       { Answertext: CountryIName, IsitCorrect: true },

       { Answertext: CountryKName, IsitCorrect: false },

       { Answertext: CountryLName, IsitCorrect: false },

     ],

   },
2

Hi @freesudani,
there are various ways to “randomise” an array,

the most naive implementation I can think of is using sort with a custom function.
Something like:

[1,2,3,4].sort((a,b) => 0.5 - Math.random());

should do the trick.

Mind that this is not a truly randomised shuffle, if you want a truly random permutation you probably need to use an ad hoc algorithm for that.

Then it’s just a matter of applying you shuffle function to your array. :sparkles:

Hope this helps.

2 Likes
4

Thank you , but how i can get it shuffled while its deeply nested this way ?

5

Are you trying to rearrange the questions, rearrange the answers within the questions, or both?

If you sort an array of objects, the contents of each object travels with it. If you want to shuffle the arrays of answers within each question, make your shuffle function abstract enough to sort any array, then loop over the questions and shuffle the answers for each one.

This is the theory, an outline of what it sounds like you want. Does this help, or are you looking more for a how it’s done?

1 Like
6

Yes thats exactly what im looking for , since this is for multi choice quiz app , its important that the correct answer position should be dynamic , i will appreciate it if you show me how it can be done.

7

You have an array of object, of each object you want to take a field, and apply your custom logic.

This kind of data manipulation is something you should get used to, so I encourage you to try to come up with a solution yourselves.
And if you have doubts just ask for guidance/help.

But if you really can’t here’s how I’d do it using array.map.

QuestionsList.map(q => ({
  ...q,
  options: q.options.sort(() => 0.5 - Math.random())
}));
1 Like
8

As I’d said, i might separate out that sort function, so you can use it anywhere. If you do that, later on you can change it out for a different one at any time.

I might do this:

// we can use this anywhere!
const shuffle = () => 0.5 - Math.random();

const testQuestions = QuestionsList.map(q => ({
  ...q,
  // this one shuffles the answers...
  options: q.options.sort(shuffle)
}))
// ...and this one shuffles the questions.
.sort(shuffle)

The solution is very similar to the one @Marmiz showed, but by pulling the shuffle function out, we gain flexibility.

Is this for the FCC curriculum? I ask, because some of our course lessons might be useful in understanding things like this.

1 Like
9

@Marmiz @snowmonkey
i had to copy the copy the Array then apply the shuffle function which worked perfectly thanks for both of you .
@snowmonkey is not for the FCC curriculum , just practicing what i learned ,.

10

.map() returns a copy of the array. Sort of the point. :grin:

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.