How to access json array resides in function and loop with ng-repeat?

Question

my html code is below for reviewans page :-

<div class="all_ques_back col-md-12" ng-init="result()" ng-repeat="ans in correctAns">
    <div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
    <div class="col-xs-9 col-md-10 col_padd">
        <div class="all_ques">hello your ans {{ans}}</div>
    </div>
    <div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>

and my controller code is like :-

var data = angular.module('App', ['ngRoute']);

data.controller('SmartLearnerController', function($scope, $location) {
    $scope.result = function() {
        $scope.correctAns = [{
            "QuestionID": "1",
            "QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
            "Image": "zibra-crossing.jpg",
            "Correct": "two",
            "Explaination": "Question one explaination is goes here"
        }, {
            "QuestionID": "2",
            "QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
            "Image": "",
            "Correct": "one",
            "Explaination": "Question two explaination is goes here"
        }, {
            "QuestionID": "3",
            "QuestionLabel": "While you are driving on gra dient roads,you should ?",
            "Image": "sign traffic.jpg",
            "Correct": "one",
            "Explaination": "Question three explaination is goes here"
        }, {
            "QuestionID": "4",
            "QuestionLabel": "When child lock is applied in car ?",
            "Image": "",
            "Correct": "two",
            "Explaination": "Question four explaination is goes here"
        }]
        $location.path("/reviewans");
    }
});

what is being displayed right now??? try accessing fields on 'ans' — binariedMe, Jul 14 '15 at 10:30
still getting [] blank array result in ans, i think result is not bind due to i'd redirect page using $location.path() — Nimesh khatri, Jul 14 '15 at 11:25

score 0 · Answer 1 · answered Jul 14 '15 at 10:40

@Nimesh i moved ng-init to ng-controller div and changed {{ans}} to {{ans.QuestionLabel}}

Html :-

<div ng-app="myApp" ng-controller="Ctrl" ng-init="result()">
        <div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
            <div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
            <div class="col-xs-9 col-md-10 col_padd">
                <div class="all_ques">hello your ans {{ans.QuestionLabel}}</div>
            </div>
        <div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
    </div>

Js :-

var myAngApp = angular.module('myApp', []);
            myAngApp.controller('Ctrl', function ($scope) {
                $scope.result = function () {
                    $scope.correctAns = [{
                        "QuestionID": "1",
                        "QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
                        "Image": "zibra-crossing.jpg",
                        "Correct": "two",
                        "Explaination": "Question one explaination is goes here"
                    }, {
                        "QuestionID": "2",
                        "QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
                        "Image": "",
                        "Correct": "one",
                        "Explaination": "Question two explaination is goes here"
                    }, {
                        "QuestionID": "3",
                        "QuestionLabel": "While you are driving on gra dient roads,you should ?",
                        "Image": "sign traffic.jpg",
                        "Correct": "one",
                        "Explaination": "Question three explaination is goes here"
                    }, {
                        "QuestionID": "4",
                        "QuestionLabel": "When child lock is applied in car ?",
                        "Image": "",
                        "Correct": "two",
                        "Explaination": "Question four explaination is goes here"
                    }]
                    $location.path("/reviewans");
                };

            });

Output :- enter image description here

@Thanks vaibhav for your help but in my case i have pushing dynamic array instead of static one that's why your given solution not works for me, i have getting output [] (blank array) and i'd redirect page after click on button ng-click event, i think that is the reason i'm getting [] null in array — Nimesh khatri, Jul 14 '15 at 11:18

score 0 · Accepted Answer · answered Jul 14 '15 at 10:42

0

Please check working example : DEMO

Just move ng-init to above tag

i.e

<body ng-controller="MainCtrl"  ng-init="result()" >
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
    <div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>

answered Jul 14 '15 at 10:42

User2

1,293
8
17

hii how can i access $scope.correctAns of my result in controller root, i mean to say assign dynamically it in $scope.myresult() in controller so i can access it directly, pls.help – Nimesh khatri Jul 14 '15 at 11:40
Could you please elaborate your question. Exactly at what place you want to access it? – User2 Jul 14 '15 at 13:19
i want to access $scope.correctAns from Controller's result method where i have pushing dynamic array items, now i want to access that same array result to another page ? here my problem is whenever i'm trying to route another page i'm getting null [] in array because that array isn't stored anywhere ? so how can i store it and access on second page ??? – Nimesh khatri Jul 15 '15 at 04:48
second page is having different controller? – User2 Jul 15 '15 at 05:54
both current and second page have same controller – Nimesh khatri Jul 15 '15 at 06:51
Better you call function inside controller it will work then. Please check my Demo and open console, you will see the result. – User2 Jul 15 '15 at 07:23
otherwise you can call this function in "/reviewans" this view. It should work. – User2 Jul 15 '15 at 08:01
hii how can i get data on second page after page redirection using $location.path, here my problem is i'm pushing dynamic data in array, as soon as i am redirect the page i am getting null array on second page ? can you please give me a proper solution ? – Nimesh khatri Jul 17 '15 at 05:52
can you please check this link ,i'd descibed my problem here: http://stackoverflow.com/questions/31451652/getting-null-array-after-redirect-using-location-path-in-angularjs/31451846?noredirect=1#comment50872215_31451846 – Nimesh khatri Jul 17 '15 at 06:27
in above given link i'm getting dynamic pushed array on same page but after redirection of page i'm getting null array, how can i redirect page with current pushed array in second page??? you may check above link . – Nimesh khatri Jul 17 '15 at 06:34

score 0 · Answer 3 · answered Jul 15 '15 at 06:56

Here, the problem is with directive priority, ng-repeat having higher priority over ng-init, ng-init having priority=450, where as ng-repeat having priority=1000 (Refer angular source code). So technically ng-repeat gets executed before ng-init so correctAns is empty.

You can either move ng-init one level up into HTML or to ng-controller tag.

OR/ELSE

If you are trying to run something while your controller loads, it's actually much simpler than you thought:

var myAngApp = angular.module('myApp', []);
        myAngApp.controller('Ctrl', function ($scope) {
            $scope.result = function () {
                $scope.correctAns = [{
                    "QuestionID": "1",
                    "QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
                    "Image": "zibra-crossing.jpg",
                    "Correct": "two",
                    "Explaination": "Question one explaination is goes here"
                }, {
                    "QuestionID": "2",
                    "QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
                    "Image": "",
                    "Correct": "one",
                    "Explaination": "Question two explaination is goes here"
                }, {
                    "QuestionID": "3",
                    "QuestionLabel": "While you are driving on gra dient roads,you should ?",
                    "Image": "sign traffic.jpg",
                    "Correct": "one",
                    "Explaination": "Question three explaination is goes here"
                }, {
                    "QuestionID": "4",
                    "QuestionLabel": "When child lock is applied in car ?",
                    "Image": "",
                    "Correct": "two",
                    "Explaination": "Question four explaination is goes here"
                }]
                $location.path("/reviewans");
            };

              $scope.result();

        });

i'd tried to taken it in html tag too but it's not works for me — Nimesh khatri, Jul 15 '15 at 07:46
http://plnkr.co/edit/haEthPQ7Z841e76jAgXj?p=preview check above link i have created simple demo wherever i want to get data from correctAns and loop it in view2.html, in my case page isn't redirect to view2 while click on index's link named 'View 2'..i want fetch that json data into index view — Nimesh khatri, Jul 15 '15 at 08:57
@Nimesh, explore ng-view concept. Try to follow one view-one controller pattern(which is ideal for angular) or else go for nested view. — Vishal Rajole, Jul 15 '15 at 09:36

How to access json array resides in function and loop with ng-repeat?

3 Answers3