How to show item from json Array one by one in Angular JS

Question

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 an 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.....

Updated Input Json :

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

When the application loads for the first time, application should load only the first item from above json array which means only application "A" (first item) data.

Once user clicks on any button (install/cancel) in Footer then it should changed its data and display application "B"'s contents. This process should continue till the end of json array.

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

Updated Code :

HTML file :

<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>

app.js file :

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);*/
        }
    };

});

Problems :

1 : Why is the data of first item not getting loaded? I have done changes in HTML as per my understanding.

2 : How Can I navigate through all items. I will try @John Carpenter's answer. Before that first problem should be resolved.

Please help me, thanks in advance.

I've answered a couple of your questions related to this program of yours. I would suggest reading this page article. The key points here that I think you're missing are Introduce the problem before you post any code, Write a title that summarizes the specific problem, and Help others reproduce the problem. For this last part, look here. This question is long, it is not clear what you are asking, and it will not be helpful to future people visiting the site. — Frank Bryce
– Frank Bryce, Commented Jul 7, 2015 at 21:17
demo is worthless when all it does is throw errors. Post code in question not images. Also what is the question? If you want repeating items, use ng-repeat which is part of every angular basic tutorial — charlietfl
– charlietfl, Commented Jul 7, 2015 at 23:27
@charlietfl thanks for your comment. I know how to use ng-repeat, Here my question is different. I want to keep showing items one by one from json array when user click on install/cancel button. — sam_k
– sam_k, Commented Jul 8, 2015 at 1:21

Frank Bryce · Accepted Answer · 2015-07-09 16:32:46Z

2

OK, so I'm not 100% sure what you want but I'll take a stab at it. In the future, it would be helpful to post less code (probably not the entire project you are working on). It is a good idea to make a simpler example than the "real" one, where you can learn what you need to learn and then go apply it to the "real" code that you have.

Anyways, this example is a simple button that you click on to change what is displayed.

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

app.controller('MyController', ['$scope', function($scope){
    $scope.indexToShow = 0;
    $scope.items = [
        'item 1', 
        'item 2', 
        'item 3'
    ];
    
    $scope.change = function(){
        $scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length;
    };
}]);

.simple-button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApplication" ng-controller="MyController">
  <div ng-repeat="item in items track by $index" ng-show="$index == indexToShow">
    {{item}}
  </div>
  <div class="simple-button" ng-click="change()">click me!</div>
</div>

edited Jul 9, 2015 at 16:32

answered Jul 8, 2015 at 12:09

Frank Bryce

8,5264 gold badges41 silver badges58 bronze badges

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

11 Comments

sam_k Over a year ago

Thanks for your answer. I am not sure what information is not clear for you guys. I will try to make simple demo and will update my question

Frank Bryce Over a year ago

My main question: what is the key part of your project that you would like to solve with your question? In general, a specific project will not be useful to future visitors of stackoverflow, however a specific problem could be. In my answer I attempt to solve the problem of displaying different information from an object on the screen on a button click, which is what I thought your problem might be. I don't think fixing your specific project code is helpful to the stackoverflow community.

sam_k Over a year ago

I understand what are you trying to say. I will edit question soon. Give me some time to make it working as demo

sam_k Over a year ago

Check my updated question. I refer this question's answer in my case. stackoverflow.com/questions/24293300/… But I am not able to see data.

sam_k Over a year ago

I dnt think so, Here you can take a look on my console log :pastebin.com/KJEJ4MdQ

|

Collectives™ on Stack Overflow

How to show item from json Array one by one in Angular JS

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related