Previously, I used the following code to retrieve a JSON result from a function before integrating AngularJS:
$.ajax({
url: '@Url.Action("getGamedata", "Home")',
type: 'GET',
dataType: 'json',
cache: false,
async: false,
success: function (gameInfo) {
//alert(gameInfo.Name); //Working OK
for(var i=0;i<6;i++)
createTable(gameInfo[i]);
}
});
The JSON result includes 6 items with details like name, genre, imageUrl, and more. With AngularJS in place now, I have a function that can dynamically build a grid:
function buildGridModel(tileTmpl) {
var it, results = [];
for (var j = 0; j < 6; j++) {
it = angular.extend({}, tileTmpl);
it.icon = it.icon + (j + 1);
it.title = it.title + (j + 1);
it.span = { row: 1, col: 1 };
switch (j + 1) {
case 1:
it.background = "red";
break;
case 2: it.background = "green"; break;
case 3: it.background = "darkBlue"; break;
case 4:
it.background = "blue";
break;
case 5:
it.background = "yellow";
break;
case 6: it.background = "pink"; break;
}
results.push(it);
}
return results;
}
In order to populate each tile in the grid with the corresponding title from the JSON data, I need to map them accordingly:
- 1st tile title = 1st JSON item title
- 2nd tile title = 2nd JSON item title
- and so on