Angular.js click through json data array?


#1

I am developing one prototype application in ionic framework. I am newbie for angular js, HTML, CSS , Java Script and all this stuff.

I have one json file which I am using as a input. I am able to parse this Json file and able to get json object from this. This json object contains array of items. You can refer below json content for this. Here items are application A,B…

First time when application start at that time application should load only first item data from above json array that means only application “A” (first item) data.

Once user click on any buttons (install/cancel) from Footer then it should changed its data and display application “B”'s contents. This process should continue till end json array.

My current code is not loading even first item data in. I am doing something wrong in HTML.

Json File

 {
    "data": [
        {
            "applicationname": "A",
            "permissions": [
                {
                    "text": "at"
                },
                {
                    "text": "at1"
                }
            ]
        },
        {
            "applicationname": "B",
            "permissions": [
                {
                    "text": "bt"
                },
                {
                    "text": "bt1"
                }
            ]
        }
    ]
}

app.js

pmApp.controller('CheckboxController', function ($scope, $http, DataService) {


    // define the function that does the ajax call
    getmydata = function () {
        return $http.get("js/sample.json")
            .success(function (data) {
                $scope.applicationdata = data;
            });

    }

    // do the ajax call
    getmydata().success(function (data) {
        // stuff is now in our scope, I can alert it
        $scope.data = $scope.applicationdata.data;
        $scope.devList = $scope.data[0].permissions;
        console.log("data : " + JSON.stringify($scope.data));
        console.log("first application data : " + JSON.stringify($scope.devList));
    });

    $scope.selection = [];
    $scope.selection1 = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function toggleSelection(item) {
        var idx = $scope.selection.indexOf(item);
        var jsonO = angular.copy(item);
        jsonO.timestamp = Date.now();

        DataService.addTrackedData(jsonO);
        $scope.selection1 = DataService.getTrackedData();

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);

        }
        // is newly selected
        else {
            DataService.addSelectedData(item);
            $scope.selection = DataService.getSelectedData();
            /* $scope.selection.push(item);*/
        }
    };

});

HTML code

<ion-header-bar class="bar-calm">
    <h1 class="title">Application Permissions</h1>
</ion-header-bar>
<ion-nav-view name="home" ng-repeat="app in applicationdata">
    <div class="bar bar-subheader bar-positive">
        <h3 class="title"> {{app.applicationname }}</h3>
    </div>
    <ion-content class="has-subheader">
        <div class="list" ng-controller="CheckboxController">
            <ion-checkbox ng-repeat="item in app.permissions" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
                {{ item.text }}
                <h3 class="item-text-wrap"> details come soon </h3>
            </ion-checkbox>
            <div class="item">
                <pre ng-bind="selection | json"></pre>
            </div>
            <div class="item">
                <pre ng-bind="selection1 | json"></pre>
            </div>
        </div>
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-light" ng-controller="FooterController">
        <div class="buttons">
            <button class="button button-balanced" ng-click="infunc()"> Install </button>
        </div>
        <h1 class="title"> </h1>
        <div class="buttons" ng-click="doSomething()">
            <button class="button button-balanced"> Cancel </button>
        </div>
    </ion-footer-bar>
</ion-nav-view> 

Problems :

1 : Why first item data is not load, I have done changes in HTML as per my understanding, Its not working.

2 : How Can I navigate through all items.

Please help me, thanks in advance.


#2

Have you checked what is displayed in the console?

You’re checking only for success, you should check also for error: read $http doc. I suspect that there is an error you did not see.

I suppose that if you are using a json file and $http it is to prepare for replacing it by a real web service?

I’m not sure that $http.get works with a relative URI like “js/sample.json”, have you tried with “/js/sample.json”


#3

Let me try with static data. I will add json file parsing later.


#4

you can see console logs here

http://pastebin.com/KJEJ4MdQ

I am new in this all, please let me know if you can see any error.


#5

Well as you have seen you have many files missing:

GET http://localhost:8100/application4.html 404 (Not Found)

Data returned OK, so they are in $scope.data and $scope.devList but you do not seem to use these values anyway.

I’m not sure to understand your problem but I suspect that it could be related to the fact that ng-repeat has its own scope.

For readibility I think you should isolate your data access methods in an angular service.


#6

Thanks for your reply. I am not aware about these big terms like scope and all. Can you please tell me in simple way what should I do next. I will fix that file not found error.
Why I can not use $scope.data and $scope.devList data?


#7

If you don’t understand the notion of scope in AngularJS, you should make a pause and read about it before coding or you won’t get far because it’s a crucial notion.

I did not say you could not use these values, I said you did not use them either in your controller or your HTML.


#8

Why I can not use? I used before and it was working. I can able to see data. only difference was that was static data and now I am parsing this json file from one input file and storing in one variable. Please make me correct if I am wrong.