Hi, I have a simple JSON file with name "GameInfo.json", as below.
JSON
Now Load this file as below through json
JS
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.
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>Thats it :)
<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>
