Monday, September 7, 2015

JSON with Angular

Hi, I have a simple JSON file with name "GameInfo.json", as below.
JSON
[
    {
        "GameName": "Game 1",
        "Client": "Self",
        "Lines": 5,
        "Feature": "",
        "LineType": "Lines",
        "GameImage": "game1.jpg"
    },
    {
        "GameName": "Game 2",
        "Client": "Self",
        "Lines": 5,
        "Feature": "No Feature",
        "LineType": "Lines",
        "GameImage": "no-preview.jpg"
    }
]

Now Load this file as below through json
JS
var app = angular.module('GameInformation', []);
app.controller('gameInfo', function($scope, $http)
{
$http.get("GameInfo.json").success(function(response){
$scope.gameDetails = response;
}).error(function(data, status, headers, config) {
                console.log('error loading json');
        });
});

Now to show this, follow the below step in html page

1. Create a table to show these details, then iterate the result for this.

        <div class="Title">GAME INFORMATION</div>
<div class="Heading">
<div class="Cell1">S No.</div>
<div class="Cell1">Game Name</div>
<div class="Cell1">Client</div>
<div class="Cell1">Lines</div>
<div class="Cell1">Feature</div>
<div class="Cell1">Line Type</div>
<div class="Cell1">Game Image</div>
</div>
<div id="rows{{$index}}" class="Row" ng-repeat="info in gameDetails">
<div class="CellCenter">{{$index+1}}</div>
<div class="Cell">{{info.GameName}}</div>
<div class="Cell2">{{info.Client}}</div>
<div class="Cell">{{info.Lines}}</div>
<div class="Cell">{{info.Feature}}</div>
<div class="Cell">{{info.Lines}}</div>
<div class="Cell">{{info.LineType}}</div>
<div class="Cell">{{info.GameImage}}</div>
</div>
Thats it :)

No comments:

Post a Comment