logo

ASP.NET - Javascript - How to read an JSON structure using angularJS

Overview: This code snippet demonstrates how to read a JSON structure in angular var myApp = angular.module('JSONApp', []);

AngularJS Controller

myApp.controller('JSONController', function ($scope) {

    $scope._groups = [{
        "Groups": {
            "ListItem": "[{\"userid\":\"John\",\"groupid\":\"Running\",\"fileid\":\"1.json\"},{\"userid\":\"Bob\",\"groupid\":\"Swimming\",\"fileid\":\"2.json\"}]"
        }
    }];
    $scope.parseJSON = function (json) {
        return JSON.parse(json);
    }
});

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JSON</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet">
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/jsonController.js"></script>
</head>
<body>
    <div class="container">
        <div ng-app="JSONApp">
            <div ng-controller="JSONController">
                <div ng-repeat="list in _groups" ng-init="myInfo=parseJSON(list.Groups.ListItem)">
                    <div ng-repeat="listItem in myInfo">{{listItem.userid}} {{listItem.fileid}} {{listItem.groupid}}</div>
                </div>
            </div>
        </div>
    </div>

    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

</body>
</html>
s