Random function in Angular JS

Question

I have a json file with questions, so an array. I want to make all the questions to be random. This is my code from the js file, but I don't know why doesn't work.

$http.get('quiz_data.json').then(function(quizData){
        $scope.myQuestions = quizData.data;
        $scope.myQuestions = Math.floor(Math.random()*2);
    });

And in the html

<div ng-repeat="myQuestion in myQuestions"> <p class="txt">{{myQuestion.question}}</p></div>

$scope.myQuestions same name?

NiRUS
– NiRUS

2016-02-29 15:28:48 +00:00
Commented Feb 29, 2016 at 15:28 — NiRUS
– NiRUS, Commented Feb 29, 2016 at 15:28

Sunil Lama · Accepted Answer · 2016-02-29 18:20:04Z

5

Use:

$scope.randomQuestion= $scope.myQuestions[Math.floor(Math.random() * $scope.myQuestions.length)];

And in view: {{randomQuestion}}

UPDATE:

$http.get('quiz_data.json').then(function(quizData){
        $scope.myQuestions = quizData.data;
        $scope.randomQuestion= $scope.myQuestions[Math.floor(Math.random() * $scope.myQuestions.length)];  
    });

HTML:

<div ng-repeat="myQuestion in myQuestions">
<p class="txt">{{randomQuestion.question}}</p></div>

FINAL UPDATE:

So, the actual question was not randomizing rather shuffling the questions:

In your js file:

function shuffleArray(array) {
    var m = array.length,
        t, i;

    // While there remain elements to shuffle
    while (m) {
        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }

    return array;
}

// access the http service
// quizData object = data from quiz_data.json
$http.get('quiz_data.json').then(function(quizData) {
    $scope.myQuestions = quizData.data;
    $scope.totalQuestions = $scope.myQuestions.length;
    shuffleArray($scope.myQuestions);
});

Your HTML:

<div ng-repeat="myQuestion in myQuestions">
    <p class="txt">{{myQuestion.question}} </p>  
</div>

edited Feb 29, 2016 at 18:20

answered Feb 29, 2016 at 15:27

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

kiddo Over a year ago

I put that in my view but doesn't work ng-repeat="myQuestion in randomQuestion"

Sunil Lama Over a year ago

you don't repeat in randomQuestion. you just show the random question. for e.g: ng-repeat="myQuestion in myQuestions" which will repeat all your questions. if you show {{myQuestion.question}}. just replace that with {{randomQuestion}}

kiddo Over a year ago

After I replaced what you told me, on screen I get {"question":"Saturn is visible from Earth without a telescope"} instead of just Saturn is visible from Earth without a telescope. Something is not right Alex

Sunil Lama Over a year ago

i will edit so that it matches your logic. you just need to add .question since it has key value pair. Its really simple when you get question embedded in key value paired json format. Just use . operator to get the question :). See the update in my answer. Anything else, feel free to ask.

kiddo Over a year ago

Alex random doesn't do anything. Is printing the question text ok on screen but I don't see the power of random at all. I can put it on a live server so you can see it if you want.

|

millerbr · Accepted Answer · 2016-02-29 15:27:28Z

1

This line:

$scope.myQuestions = Math.floor(Math.random()*2);

Overwrites your array of questions and turns it into a random number. I think you want to access it as an array with that number like so:

$http.get('quiz_data.json').then(function(quizData){
        $scope.myQuestions = quizData.data;
        var randomNum = Math.floor(Math.random()*2);
        console.log($scope.myQuestions[randomNum]);
    });

answered Feb 29, 2016 at 15:27

millerbr

2,9411 gold badge16 silver badges25 bronze badges

2 Comments

Sunil Lama Over a year ago

we did answer the same thing, at the same time. Now, that i can see it. Our initial answer is actually the same. Keep up the good work. upvoted you :)

millerbr Over a year ago

Thanks! Although yours is clearly the superior answer :p upvoted you too

Collectives™ on Stack Overflow

Random function in Angular JS

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related