CODEWITHSUNDEEP
jsonangularjshtml
ovesyan
ovesyan

Reputation: 9

Getting data from JSON ( AngularJS)

I've got the whole questions that I have in my JSON file, but I need only one until the user will click the right answer and go to the next one

HTML template:

<div ng-controller="quizController">
<ul>
    <li ng-repeat="q in allData">
        <h1 id="question">{{q.question}}</h1>
    </li>
</ul>


<div class="answers">
    <a class="btn btn-primary"><p>New York</p></a>
    <a class="btn btn-warning"><p>Miami</p></a>
    <a class="btn btn-success"><p>Washington</p></a>
    <a class="btn btn-danger"><p>LA</p></a>
</div>

JS:

app.controller("quizController", function($scope, $http){
$http.get("questions.json")
    .then(function(response){
        $scope.allData = response.data;
    });
});

JSON file:

[
  {
    "question": "Which is the largest country in the world by population?",
    "options": ["India", "USA", "China", "Russia"],
    "answer": 2
  },
  {
    "question": "When did the second world war end?",
    "options": ["1945", "1939", "1944", "1942"],
    "answer": 0
  },
  {
    "question": "Which was the first country to issue paper currency?",
    "options": ["USA", "France", "Italy", "China"],
    "answer": 3
  },
  {
    "question": "Which city hosted the 1996 Summer Olympics?",
    "options": ["Atlanta", "Sydney", "Athens", "Beijing"],
    "answer": 0
  }
]

Upvotes: 0

Views: 562

Answers (2)

dcodesmith
dcodesmith

Reputation: 9614

This is similar to mindparses approach but goes a little deeper. You can navigate back and forth. It's not full proof but should help you on your way.

HTML

<div ng-app="app" ng-controller="quizController">
    <div ng-app="app" ng-controller="quizController">
        <p>
            <h1 id="question">{{currentQ.question}}</h1>
            <div class="answers">
                <ul ng-repeat="option in currentQ.options">
                    <li>{{option}}</li>
                </ul>
            </div>
        </p>
        <button ng-click="move(-1)">Previous</button>
        <button ng-click="move(1)">Next</button>
    </div>
</div>

JS/CONTROLLER

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

app.controller("quizController", function ($scope) {

    $scope.move = function (direction) {
        // you're gonna need an IF block here to stop it from going out of range.
        var position = $scope.allData.indexOf($scope.currentQ);
        $scope.currentQ = $scope.allData[position + direction];
    }

    $http.get("questions.json").then(function(response){
        $scope.allData = response.data;
        $scope.currentQ = $scope.allData[0];
    });    
});

JSFIDDLE

Upvotes: 0

mindparse
mindparse

Reputation: 7215

You should not use ng-repeat then, since this will just loop through your questions and show them all at once in the UI.

Instead, store your questions array in another variable and then bind your UI to a specific index of that variable. 

app.controller("quizController", function($scope, $http){

$scope.allData = [];
//Initially set to first element (question), then you will need to increment in further logic elsewhere probably on a button click handler if the answer is correct    
$scope.currentQuestion =  $scope.allData[0];

$http.get("questions.json")
    .then(function(response){
        $scope.allData = response.data;
    });
});

Upvotes: 1

Related Questions