How can I shuffle or randomize JSON object array data?

Question

I am working on a quiz app. I have been trying to figure out how I can shuffle the options in a quiz question.

I have researched all over, the closest I found was this: shuffle array in ng-repeat angular

However, I was unsuccessful in implementing the shuffleArray() function. It wouldn't work for me.

I have created a jsfiddle http://jsfiddle.net/fa4v8/121/

This is my ng-repeat:

<div ng-controller="MyCtrl">
    <p ng-repeat="(key,i) in options">{{options[key].text}}</p>
</div>

and this is my controller:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options = {
            "d": {
            "text": "Answer1-d"
        },
            "c": {
            "text": "Answer1-c"
        },
            "a": {
            "text": "Answer1-a"
        },
            "b": {
            "text": "Answer1-b"
        }
    }
}

the output keeps coming in this order: (a,b,c,d)

Answer-a

Answer-b

Answer-c

Answer-d

Is there a way to make the options displayed in the order as the $scope.options (d,c,a,b) or display them in random order?

If you were using an array, this answer would help you: http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array . But it seems you're using an object, so you'll probably have to adjust it a little. — sg.cc, Nov 25 '15 at 01:25
can you show me how i can modify my jsfiddle to make it work? — Edwin Aquino, Nov 25 '15 at 03:38

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

Working example that would help you: http://jsfiddle.net/owenmead/fa4v8/1/ taken from https://stackoverflow.com/a/21587316/3335993, just sort them in your controller and assign a random rank in each iteration.

function MyCtrl($scope) {
    $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    $scope.random = function() {
        return 0.5 - Math.random();
    }
}

edited May 23 '17 at 12:15

Community

1
1

answered Nov 25 '15 at 01:29

km1882

740
5
22

is there a reason why your options are in key value pairs instead of an array? – km1882 Nov 25 '15 at 01:44
yes, the reason is because i need to validate the correct answer, and each answer contains a unique "optionId" to confirm the correct answer has been selected by the user. – Edwin Aquino Nov 25 '15 at 01:48
and does this have to be random when you land on the page each time? If so then you can do it in the controller. – km1882 Nov 25 '15 at 02:04
I get the options from a database, I am using PHP/MySQL as the back end. I am able to generate the data in random order with PHP shuffle() function, as you can see from my example, the object is as d,c,a,b, but the HTML page renders a,b,c,d – Edwin Aquino Nov 25 '15 at 03:37

score 0 · Answer 2 · answered Jan 27 '16 at 21:12

Actually the ng-repeat will return the keys of the object exectly in the order as they have been defined - as long as you use Angular version 1.4 and above. Up to version 1.3 the ngRepeat directive used to sort the keys alphabetically. The jsfiddle you provided is using version 1.0...

See this plunk http://plnkr.co/edit/bStyZU And this explanation https://docs.angularjs.org/api/ng/directive/ngRepeat

How can I shuffle or randomize JSON object array data?

2 Answers2