How to modify and change data in ng-grid - json

Question

I have the following code:
var app = angular.module('mcmmo', ['ngGrid']);
app.controller('mcmmoCtrl', function($scope, $http) {
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [250, 500, 1000],
pageSize: 250,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('stats.php').success(function (largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data,page,pageSize);
});
} else {
$http.get('stats.php').success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
plugins: [new ngGridFlexibleHeightPlugin()]
};
});
Which pulls a very large load of JSON from a php file, that's stored in a database. Here are my json results.
[{"id":"1","user":"user1","lastlogin":"1402936307","skills":[{"taming":"4","mining":"534","woodcutting":"84","repair":"26","unarmed":"0","herbalism":"108","excavation":"219","archery":"10","swords":"75","axes":"24","acrobatics":"74","fishing":"403","alchemy":"0"}]
}
Here is the PHP that outputs this:
require_once('db.php');
error_reporting(1);
$getUsers = mysqli_query($db, 'SELECT * FROM mcmmo_users LIMIT 300');
$rows = array();
while ($r = mysqli_fetch_assoc($getUsers))
{
$skills = array();
$tempRow = $r;
$getSkills = mysqli_query($db, "SELECT * FROM mcmmo_skills WHERE user_id = '" . $r['id'] . "' LIMIT 300");
while ($r = mysqli_fetch_assoc($getSkills))
{
unset($r['user_id']);
$skills[] = $r;
}
$tempRow['skills'] = $skills;
$rows[] = $tempRow;
}
header('Content-Type: application/json');
echo json_encode($rows);
And this is what my grid currently looks like:
There is a couple of things wrong here:
I don't want the id or lastlogin columns.
I'd like to rename "users".
Instead of the "skills" column, I'd like for all of the data to be in it's own column, for example, taming and mining is it's own column with it's data in it's own row.
I'm not sure how to do that with this plugin though, any help would be appreciated!

Answer 1

Well, maybe changing the query string would be easy to handle it. Also by the time you navigate inside the query result, you can build your own array, just use an array with key as the name of the column.
$getUsers = mysqli_query($db, 'SELECT * FROM mcmmo_users LEFT JOIN mcmmo_skills ON mcmmo_users.id = mcmmo_skills.user_id');
$rows = array();
$cont = 0;
$userSkills = array();
while ($r = mysqli_fetch_assoc($getUsers))
{
$userSkills[$cont++] = array(
"Users" => $r['user'],
"Taming" => $r["taming"],
"Mining" => $r["mining"]
);
}
header('Content-Type: application/json');
echo json_encode($userSkills);
About Pagination
Try dirPagination at https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
It's very simple to use it and saves a lot of time.

Answer 2

As one of the commenters has already suggested, you can specify different column definitions than you have received in your incoming data. When you define your grid options, you optionally specify the column definitions separately from the data displayed:
$scope.resultGridOptions = {
data: 'myData',
columnDefs: 'columndefs',
// other parameters....
Then you just need to define your columns to reference your incoming data as documented here (especially the field and displayName):
https://github.com/angular-ui/ng-grid/wiki/Defining-columns
In your case, something like
$scope.columndefs = [{field:'id', displayName:'Id'}, {field:'user', displayName:'User'}];
should only show the id and user columns with the headers Id and User. (unless I have a typo)
Just noticed the final column part of your question: I am not sure how to show so much information in the final column. ng-grid does not support variable grid height to my knowledge, so it would make it difficult unless you can figure out a way to really condense this information into a column, but I don't know enough about your domain to recommend anything that seems reasonable.