AngularJs Table Sorting when Data is nested - javascript

How can I approach table sorting in angularjs, when my data is nested and not all columns are first level citizens of the objects.
Data (excerpt)
[
{
"name": "Team A",
"categories": [
{
"label": "FG%",
"value": 4676,
"points": 7
},
{
"label": "FT%",
"value": 8387,
"points": 9
}
]
}, {
"name": "Team B",
"categories": [
{
"label": "FG%",
"value": 5285,
"points": 10
},
{
"label": "FT%",
"value": 6111,
"points": 1
}
]
}
]
HTML
<div ng-controller="mainCtrl">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th ng:click="changeSorting('name')">Name</th>
<th ng:click="changeSorting('name')">Points</th>
<th ng:click="changeSorting(value.label)" ng-repeat="(index, value) in data.teams[0].categories">{{value.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in data.teams | orderBy:sort.column:sort.descending ">
<td>{{team.name}}</td>
<td>{{team.totalPoints}}</td>
<td ng-repeat="(name, cat) in team.categories">
{{cat.value}}
</td>
</tr>
</tbody>
</table>
</div>
Here is a approach I found a few times. Anyway, because of the structure of my data, I am afraid this isn't the right idea.
Sorting on Controller
$scope.sort = {
column: 'name',
descending: false
};
$scope.changeSorting = function(column) {
var sort = $scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
Here is the updated fiddle: http://jsfiddle.net/SunnyRed/mTywq/2/


I modified your code based on angular documentation at http://docs.angularjs.org/api/ng.filter:orderBy
HTML
<div ng-controller="mainCtrl">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th ng:click="predicate = 'name'; reverse = !reverse">Name</th>
<th ng:click="predicate = 'totalPoints'; reverse = !reverse">Points</th>
<th ng:click="toggleSort($index)" ng-repeat="category in data.teams[0].categories">{{category.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in data.teams | orderBy:predicate:reverse">
<td>{{team.name}}</td>
<td>{{team.totalPoints}}</td>
<td ng-repeat="(name, cat) in team.categories">
{{cat.value}}
</td>
</tr>
</tbody>
</table>
</div>
Sorting parts
$scope.toggleSort = function(index){
$scope.reverse = !$scope.reverse;
$scope.predicate = function(team){
return team.categories[index].points;
}
}
Here is the fiddle: http://jsfiddle.net/mgalela/Br5Wb/14/


Since you need to lookup the correct category based on it's label and then sort using it's associated value I'd create a custom orderBy function.
To use new function sortFunc we add it here:
<tr ng-repeat="team in data.teams | orderBy: sortFunc ">
Then let the user pick options:
<select ng-model="sortVal">
<option value="name">Name</option>
<option value="points">points</option>
<option value="3PM">3PM</option>
<option value="PTS">PTS</option>
</select>
Finally here's the sort function which pulls in the chosen option using $scope.sortVal and returns the appropriate value for orderBy to sort.
$scope.sortFunc = function(val) {
if ($scope.sortVal == 'name') {
return(val.name);
} else if ($scope.sortVal == 'points') {
return(val.totalPoints);
} else if ($scope.sortVal == '3PM' ||
$scope.sortVal == 'PTS') {
for (var i = 0; i < val.categories.length; i++) {
category = val.categories[i];
if (category.label == $scope.sortVal){
return(category.value);
}
}
}
}
Here's the fiddle of this working: http://jsfiddle.net/mTywq/4/

Related

How to add JSON data to my datatable if I have 3 nested data?

How to add the JSON file that are nested to the datatable i created.
I always encounter this problem:
DataTables warning: table id=tb_friendlist - Invalid JSON response.
For more information about this error, please see
http://datatables.net/tn/1
HTML
<table id="tb_friendlist" class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</tfoot>
</table>
JS/JQuery I'm Using:
$.ajax({
type : 'GET',
url: 'http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&relationship=friend&format=json&steamid=76561197960435530',
success : function(data){
console.log(data.friendslist);
$('#tb_friendlist').DataTable( {
"ajax": data,
"columns": [
{ "data": data.friendslist.friends.steam_id },
{ "data": data.friendslist.friends.relationship },
{ "data": data.friendslist.friends.friend_since }
]
} );
}
});
JSON File:
{"friendslist":{"friends":[{"steamid":"76561197960265731","relationship":"friend","friend_since":0},{"steamid":"76561197960265738","relationship":"friend","friend_since":0},{"steamid":"76561197960265740","relationship":"friend","friend_since":0},{"steamid":"76561197960265744","relationship":"friend","friend_since":1585508613},{"steamid":"76561197960265747","relationship":"friend","friend_since":0},{"steamid":"76561197960265749","relationship":"friend","friend_since":0},{"steamid":"76561197960268093","relationship":"friend","friend_since":1251433222},{"steamid":"76561197960269040","relationship":"friend","friend_since":1436934825},{"steamid":"76561197960270258","relationship":"friend","friend_since":0},{"steamid":"76561197960270457","relationship":"friend","friend_since":1257142334},{"steamid":"76561197960271661","relationship":"friend","friend_since":1327552405},{"steamid":"76561197960273963","relationship":"friend","friend_since":0},{"steamid":"76561197960274006","relationship":"friend","friend_since":0},{"steamid":"76561197960274521","relationship":"friend","friend_since":1283486787},{"steamid":"76561197960279106","relationship":"friend","friend_since":1252902778},{"steamid":"76561197960282696","relationship":"friend","friend_since":0},{"steamid":"76561197960282709","relationship":"friend","friend_since":0},{"steamid":"76561197960299622","relationship":"friend","friend_since":0},{"steamid":"76561197960304647","relationship":"friend","friend_since":0},{"steamid":"76561197960317684","relationship":"friend","friend_since":1251865307},{"steamid":"76561197960323774","relationship":"friend","friend_since":0},{"steamid":"76561197960333589","relationship":"friend","friend_since":0},{"steamid":"76561197960359661","relationship":"friend","friend_since":0},{"steamid":"76561197960389850","relationship":"friend","friend_since":1327992364},{"steamid":"76561197960392503","relationship":"friend","friend_since":1366092272},{"steamid":"76561197960411603","relationship":"friend","friend_since":1346991873},{"steamid":"76561197960423941","relationship":"friend","friend_since":0},{"steamid":"76561197960434622","relationship":"friend","friend_since":1278879949},{"steamid":"76561197960491601","relationship":"friend","friend_since":1230537028},{"steamid":"76561197960505737","relationship":"friend","friend_since":1327552425},{"steamid":"76561197960508417","relationship":"friend","friend_since":1298569205},{"steamid":"76561197960522471","relationship":"friend","friend_since":1230537024},{"steamid":"76561197960529298","relationship":"friend","friend_since":1390366452},{"steamid":"76561197960549564","relationship":"friend","friend_since":0},{"steamid":"76561197960563532","relationship":"friend","friend_since":0},{"steamid":"76561197960568847","relationship":"friend","friend_since":1333079735},{"steamid":"76561197960575737","relationship":"friend","friend_since":1331440292},{"steamid":"76561197960691398","relationship":"friend","friend_since":1333079737},{"steamid":"76561197960789988","relationship":"friend","friend_since":0},{"steamid":"76561197960860649","relationship":"friend","friend_since":0},{"steamid":"76561197960879472","relationship":"friend","friend_since":1331440322},{"steamid":"76561197961004348","relationship":"friend","friend_since":1233376941},{"steamid":"76561197961016107","relationship":"friend","friend_since":1299561164},{"steamid":"76561197961048326","relationship":"friend","friend_since":1305088151},{"steamid":"76561197961301890","relationship":"friend","friend_since":0},{"steamid":"76561197961322701","relationship":"friend","friend_since":1562736913},{"steamid":"76561197961456983","relationship":"friend","friend_since":1436936650},{"steamid":"76561197961493110","relationship":"friend","friend_since":1530844814},{"steamid":"76561197961513395","relationship":"friend","friend_since":0},{"steamid":"76561197961567067","relationship":"friend","friend_since":1280805626},{"steamid":"76561197961635855","relationship":"friend","friend_since":1305088152},{"steamid":"76561197961697514","relationship":"friend","friend_since":1328471606},{"steamid":"76561197961725694","relationship":"friend","friend_since":1249447084},{"steamid":"76561197961903764","relationship":"friend","friend_since":1238215828},{"steamid":"76561197961963491","relationship":"friend","friend_since":1335800301},{"steamid":"76561197961987005","relationship":"friend","friend_since":1261202570},{"steamid":"76561197962090766","relationship":"friend","friend_since":1545426885},{"steamid":"76561197962095245","relationship":"friend","friend_since":1450768354},{"steamid":"76561197962205142","relationship":"friend","friend_since":1246690451},{"steamid":"76561197962313932","relationship":"friend","friend_since":0},{"steamid":"76561197962413930","relationship":"friend","friend_since":1452293804},{"steamid":"76561197962783665","relationship":"friend","friend_since":0},{"steamid":"76561197962833771","relationship":"friend","friend_since":1246340239},{"steamid":"76561197962844216","relationship":"friend","friend_since":0},{"steamid":"76561197963562041","relationship":"friend","friend_since":1300220501},{"steamid":"76561197963585314","relationship":"friend","friend_since":0},{"steamid":"76561197963687679","relationship":"friend","friend_since":1251777207},{"steamid":"76561197964165126","relationship":"friend","friend_since":1451974958},{"steamid":"76561197964770089","relationship":"friend","friend_since":1325652265},{"steamid":"76561197964865846","relationship":"friend","friend_since":0},{"steamid":"76561197965400579","relationship":"friend","friend_since":1509136774},{"steamid":"76561197965532939","relationship":"friend","friend_since":1350963678},{"steamid":"76561197965576021","relationship":"friend","friend_since":1258548993},{"steamid":"76561197965640811","relationship":"friend","friend_since":1267240082},{"steamid":"76561197965656609","relationship":"friend","friend_since":1347214065},{"steamid":"76561197965686610","relationship":"friend","friend_since":1312001126},{"steamid":"76561197966056073","relationship":"friend","friend_since":1234811002},{"steamid":"76561197966089529","relationship":"friend","friend_since":1348200708},{"steamid":"76561197966106312","relationship":"friend","friend_since":0},{"steamid":"76561197966109336","relationship":"friend","friend_since":1284524815},{"steamid":"76561197966589084","relationship":"friend","friend_since":0},{"steamid":"76561197966591880","relationship":"friend","friend_since":1282803048},{"steamid":"76561197966652320","relationship":"friend","friend_since":0},{"steamid":"76561197967027289","relationship":"friend","friend_since":0},{"steamid":"76561197967346751","relationship":"friend","friend_since":1419372025},{"steamid":"76561197967377359","relationship":"friend","friend_since":1375241965},{"steamid":"76561197967454254","relationship":"friend","friend_since":0},{"steamid":"76561197967823929","relationship":"friend","friend_since":1268222378},{"steamid":"76561197968282875","relationship":"friend","friend_since":0},{"steamid":"76561197968304048","relationship":"friend","friend_since":0},{"steamid":"76561197968343660","relationship":"friend","friend_since":0},{"steamid":"76561197968403639","relationship":"friend","friend_since":1274246179},{"steamid":"76561197968411673","relationship":"friend","friend_since":1258327120},{"steamid":"76561197968452293","relationship":"friend","friend_since":0},{"steamid":"76561197968459473","relationship":"friend","friend_since":1286855142},{"steamid":"76561197968493120","relationship":"friend","friend_since":1318097746},{"steamid":"76561197968499581","relationship":"friend","friend_since":1298522642},{"steamid":"76561197968575517","relationship":"friend","friend_since":1283140137},{"steamid":"76561197968662512","relationship":"friend","friend_since":1243048442},{"steamid":"76561197968887855","relationship":"friend","friend_since":0},{"steamid":"76561197969013812","relationship":"friend","friend_since":1320344898},{"steamid":"76561197969044631","relationship":"friend","friend_since":1283486596},{"steamid":"76561197969204208","relationship":"friend","friend_since":0},{"steamid":"76561197969221324","relationship":"friend","friend_since":1261119417},{"steamid":"76561197969266938","relationship":"friend","friend_since":1285385050},{"steamid":"76561197969321754","relationship":"friend","friend_since":1599851854},{"steamid":"76561197969363440","relationship":"friend","friend_since":0},{"steamid":"76561197969363506","relationship":"friend","friend_since":0},{"steamid":"76561197969389470","relationship":"friend","friend_since":0},{"steamid":"76561197969507292","relationship":"friend","friend_since":1580456777},{"steamid":"76561197969518075","relationship":"friend","friend_since":1287104617},{"steamid":"76561197969593376","relationship":"friend","friend_since":1251777234},{"steamid":"76561197970125572","relationship":"friend","friend_since":0},{"steamid":"76561197970166754","relationship":"friend","friend_since":1283486539},{"steamid":"76561197970188759","relationship":"friend","friend_since":1258311040},{"steamid":"76561197970280218","relationship":"friend","friend_since":1254978747},{"steamid":"76561197970282885","relationship":"friend","friend_since":1591890829},{"steamid":"76561197970323416","relationship":"friend","friend_since":1272505770},{"steamid":"76561197970389205","relationship":"friend","friend_since":0},{"steamid":"76561197970404169","relationship":"friend","friend_since":1260340950},{"steamid":"76561197970496388","relationship":"friend","friend_since":0},{"steamid":"76561197970498549","relationship":"friend","friend_since":1305400189},{"steamid":"76561197970522250","relationship":"friend","friend_since":1252469387},{"steamid":"76561197970545345","relationship":"friend","friend_since":0},{"steamid":"76561197970553411","relationship":"friend","friend_since":1280805662},{"steamid":"76561197970565175","relationship":"friend","friend_since":0},{"steamid":"76561197970572119","relationship":"friend","friend_since":1262234024},{"steamid":"76561197970610844","relationship":"friend","friend_since":0},{"steamid":"76561197970667119","relationship":"friend","friend_since":1331440337},{"steamid":"76561197970792670","relationship":"friend","friend_since":1252469394},{"steamid":"76561197970822785","relationship":"friend","friend_since":0},{"steamid":"76561197970953718","relationship":"friend","friend_since":0},{"steamid":"76561197970968871","relationship":"friend","friend_since":1414954611},{"steamid":"76561197971025345","relationship":"friend","friend_since":1333079747},{"steamid":"76561197971057511","relationship":"friend","friend_since":1312778874},{"steamid":"76561197971085582","relationship":"friend","friend_since":1356718664},{"steamid":"76561197971124276","relationship":"friend","friend_since":0},{"steamid":"76561197971128200","relationship":"friend","friend_since":1254974887},{"steamid":"76561197971238476","relationship":"friend","friend_since":1249447170},{"steamid":"76561197971332340","relationship":"friend","friend_since":1347679040},{"steamid":"76561197971400048","relationship":"friend","friend_since":1336893966},{"steamid":"76561197971521071","relationship":"friend","friend_since":1455533991},{"steamid":"76561197971951755","relationship":"friend","friend_since":0},{"steamid":"76561197972291076","relationship":"friend","friend_since":1585508607},{"steamid":"76561197972345559","relationship":"friend","friend_since":1278650650},{"steamid":"76561197972495328","relationship":"friend","friend_since":1380689769},{"steamid":"76561197972790745","relationship":"friend","friend_since":1244528575},{"steamid":"76561197972799883","relationship":"friend","friend_since":1346896735},{"steamid":"76561197973185198","relationship":"friend","friend_since":1257142395},{"steamid":"76561197973639804","relationship":"friend","friend_since":0},{"steamid":"76561197974284838","relationship":"friend","friend_since":1295845647},{"steamid":"76561197974616601","relationship":"friend","friend_since":1319599842},{"steamid":"76561197974777179","relationship":"friend","friend_since":1289893342},{"steamid":"76561197974807412","relationship":"friend","friend_since":0},{"steamid":"76561197975724041","relationship":"friend","friend_since":1337920161},{"steamid":"76561197975914763","relationship":"friend","friend_since":0},{"steamid":"76561197976244853","relationship":"friend","friend_since":1299561095},{"steamid":"76561197977035150","relationship":"friend","friend_since":0},{"steamid":"76561197977450070","relationship":"friend","friend_since":1347343394},{"steamid":"76561197978181900","relationship":"friend","friend_since":1234074199},{"steamid":"76561197978236369","relationship":"friend","friend_since":1258442642},{"steamid":"76561197978266558","relationship":"friend","friend_since":1418699542},{"steamid":"76561197979187556","relationship":"friend","friend_since":0},{"steamid":"76561197979435127","relationship":"friend","friend_since":1236474691},{"steamid":"76561197979480245","relationship":"friend","friend_since":1305088194},{"steamid":"76561197979536477","relationship":"friend","friend_since":1246340263},{"steamid":"76561197980388693","relationship":"friend","friend_since":1275536464},{"steamid":"76561197981291930","relationship":"friend","friend_since":1334029416},{"steamid":"76561197982240193","relationship":"friend","friend_since":0},{"steamid":"76561197982656766","relationship":"friend","friend_since":1257142470},{"steamid":"76561197982998220","relationship":"friend","friend_since":1316632423},{"steamid":"76561197983491300","relationship":"friend","friend_since":0},{"steamid":"76561197983540634","relationship":"friend","friend_since":1347896489},{"steamid":"76561197984212648","relationship":"friend","friend_since":1524288546},{"steamid":"76561197984476370","relationship":"friend","friend_since":1252037969},{"steamid":"76561197985244272","relationship":"friend","friend_since":0},{"steamid":"76561197985279592","relationship":"friend","friend_since":0},{"steamid":"76561197985536977","relationship":"friend","friend_since":1350704086},{"steamid":"76561197985866466","relationship":"friend","friend_since":1289893378},{"steamid":"76561197986695451","relationship":"friend","friend_since":1244788670},{"steamid":"76561197987101307","relationship":"friend","friend_since":1274940404},{"steamid":"76561197987393094","relationship":"friend","friend_since":1298522644},{"steamid":"76561197988042654","relationship":"friend","friend_since":1265486190},{"steamid":"76561197988052879","relationship":"friend","friend_since":1373949178},{"steamid":"76561197988197730","relationship":"friend","friend_since":1276488085},{"steamid":"76561197988221501","relationship":"friend","friend_since":1283451661},{"steamid":"76561197989222171","relationship":"friend","friend_since":1377143565},{"steamid":"76561197989701891","relationship":"friend","friend_since":1316837417},{"steamid":"76561197989870485","relationship":"friend","friend_since":0},{"steamid":"76561197990525201","relationship":"friend","friend_since":1252469413},{"steamid":"76561197990859622","relationship":"friend","friend_since":0},{"steamid":"76561197990949369","relationship":"friend","friend_since":1230537020},{"steamid":"76561197991390878","relationship":"friend","friend_since":0},{"steamid":"76561197991518342","relationship":"friend","friend_since":1347601219},{"steamid":"76561197991751968","relationship":"friend","friend_since":0},{"steamid":"76561197991840415","relationship":"friend","friend_since":1479705086},{"steamid":"76561197991899002","relationship":"friend","friend_since":1286082214},{"steamid":"76561197992152522","relationship":"friend","friend_since":1280287926},{"steamid":"76561197992219796","relationship":"friend","friend_since":1311828146},{"steamid":"76561197992295963","relationship":"friend","friend_since":1278650658},{"steamid":"76561197992459511","relationship":"friend","friend_since":1291491332},{"steamid":"76561197992577188","relationship":"friend","friend_since":0},{"steamid":"76561197992594628","relationship":"friend","friend_since":0},{"steamid":"76561197992720132","relationship":"friend","friend_since":0},{"steamid":"76561197992927490","relationship":"friend","friend_since":0},{"steamid":"76561197993345099","relationship":"friend","friend_since":0},{"steamid":"76561197993552969","relationship":"friend","friend_since":1286082108},{"steamid":"76561197993620247","relationship":"friend","friend_since":1263011646},{"steamid":"76561197993630232","relationship":"friend","friend_since":1249148398},{"steamid":"76561197993751379","relationship":"friend","friend_since":1283486349},{"steamid":"76561197994223774","relationship":"friend","friend_since":1299734097},{"steamid":"76561197994242870","relationship":"friend","friend_since":1347937824},{"steamid":"76561197994359533","relationship":"friend","friend_since":1276230703},{"steamid":"76561197994365894","relationship":"friend","friend_since":1294605278},{"steamid":"76561197994871291","relationship":"friend","friend_since":1372582055},{"steamid":"76561197994894204","relationship":"friend","friend_since":1335159140},{"steamid":"76561197995035454","relationship":"friend","friend_since":1330072067},{"steamid":"76561197995390971","relationship":"friend","friend_since":1296715379},{"steamid":"76561197995557785","relationship":"friend","friend_since":1356718679},{"steamid":"76561197995620521","relationship":"friend","friend_since":1242272781},{"steamid":"76561197996055531","relationship":"friend","friend_since":1358916974},{"steamid":"76561197996226415","relationship":"friend","friend_since":1352804786},{"steamid":"76561197996599994","relationship":"friend","friend_since":1298522768},{"steamid":"76561197997296694","relationship":"friend","friend_since":1250832422},{"steamid":"76561197997348592","relationship":"friend","friend_since":1567223810},{"steamid":"76561197997374662","relationship":"friend","friend_since":1274246279},{"steamid":"76561197997412731","relationship":"friend","friend_since":1346896747},{"steamid":"76561197997491987","relationship":"friend","friend_since":1252728718},{"steamid":"76561197998048607","relationship":"friend","friend_since":1283486669},{"steamid":"76561197998113407","relationship":"friend","friend_since":1285649640},{"steamid":"76561197998287308","relationship":"friend","friend_since":1316499408},{"steamid":"76561197998342021","relationship":"friend","friend_since":1286338395},{"steamid":"76561197998653180","relationship":"friend","friend_since":1376112288},{"steamid":"76561197999644177","relationship":"friend","friend_since":1335800276},{"steamid":"76561197999825207","relationship":"friend","friend_since":1449120235},{"steamid":"76561198000167056","relationship":"friend","friend_since":1274246426},{"steamid":"76561198000175595","relationship":"friend","friend_since":1241840395},{"steamid":"76561198000198761","relationship":"friend","friend_since":1274246470},{"steamid":"76561198000613320","relationship":"friend","friend_since":1609138583},{"steamid":"76561198000778598","relationship":"friend","friend_since":1383625609},{"steamid":"76561198002118002","relationship":"friend","friend_since":1343104953},{"steamid":"76561198002524224","relationship":"friend","friend_since":1449120327},{"steamid":"76561198002826921","relationship":"friend","friend_since":1299561235},{"steamid":"76561198004860018","relationship":"friend","friend_since":1290812641},{"steamid":"76561198006930795","relationship":"friend","friend_since":1370242583},{"steamid":"76561198007105082","relationship":"friend","friend_since":1290812487},{"steamid":"76561198007754155","relationship":"friend","friend_since":1290812651},{"steamid":"76561198009095613","relationship":"friend","friend_since":1325652348},{"steamid":"76561198009246617","relationship":"friend","friend_since":1530164209},{"steamid":"76561198010062752","relationship":"friend","friend_since":1351306468},{"steamid":"76561198010168695","relationship":"friend","friend_since":1248755147},{"steamid":"76561198011246300","relationship":"friend","friend_since":1330192563},{"steamid":"76561198011742416","relationship":"friend","friend_since":1348542115},{"steamid":"76561198012882785","relationship":"friend","friend_since":1331440377},{"steamid":"76561198013560482","relationship":"friend","friend_since":1283486799},{"steamid":"76561198014254115","relationship":"friend","friend_since":1254806199},{"steamid":"76561198014273977","relationship":"friend","friend_since":1347773002},{"steamid":"76561198015234450","relationship":"friend","friend_since":1351306412},{"steamid":"76561198026562132","relationship":"friend","friend_since":1346715463},{"steamid":"76561198026610207","relationship":"friend","friend_since":1346739192},{"steamid":"76561198027956837","relationship":"friend","friend_since":1316052135},{"steamid":"76561198031319803","relationship":"friend","friend_since":1363325130},{"steamid":"76561198031708819","relationship":"friend","friend_since":1372582136},{"steamid":"76561198037225309","relationship":"friend","friend_since":1297316926},{"steamid":"76561198037252562","relationship":"friend","friend_since":1346219433},{"steamid":"76561198040984261","relationship":"friend","friend_since":1445142960},{"steamid":"76561198042468117","relationship":"friend","friend_since":1347491840},{"steamid":"76561198042665686","relationship":"friend","friend_since":1453440326},{"steamid":"76561198045945967","relationship":"friend","friend_since":1350704096},{"steamid":"76561198046379753","relationship":"friend","friend_since":1370242520},{"steamid":"76561198046983307","relationship":"friend","friend_since":1346817023},{"steamid":"76561198047404672","relationship":"friend","friend_since":1454562868},{"steamid":"76561198050396055","relationship":"friend","friend_since":1318826201},{"steamid":"76561198059223364","relationship":"friend","friend_since":1468562520},{"steamid":"76561198065538643","relationship":"friend","friend_since":1448169802},{"steamid":"76561198072330588","relationship":"friend","friend_since":1387764448},{"steamid":"76561198075307934","relationship":"friend","friend_since":1446007075},{"steamid":"76561198085350447","relationship":"friend","friend_since":1362335241},{"steamid":"76561198090691972","relationship":"friend","friend_since":1581753542},{"steamid":"76561198109901633","relationship":"friend","friend_since":1418699578},{"steamid":"76561198113967572","relationship":"friend","friend_since":1383948235},{"steamid":"76561198119266856","relationship":"friend","friend_since":1403374765},{"steamid":"76561198829441805","relationship":"friend","friend_since":1580526105},{"steamid":"76561198851945186","relationship":"friend","friend_since":1559687431},{"steamid":"76561199013049287","relationship":"friend","friend_since":1577157657},{"steamid":"76561199064639120","relationship":"friend","friend_since":1605227570},{"steamid":"76561199147650161","relationship":"friend","friend_since":1614836906}]}}

Instead of passing the friendslist object as the data source, pass in the friendslist.friends array
// lets take 5 friends as an example
var data = {
"friendslist": {
"friends": [
{ "steamid": "76561197960265731", "relationship": "friend", "friend_since": 0 }
, { "steamid": "76561197960265738", "relationship": "friend", "friend_since": 0 }
, { "steamid": "76561197960265740", "relationship": "friend", "friend_since": 0 }
, { "steamid": "76561197960265744", "relationship": "friend", "friend_since": 1585508613 }
, { "steamid": "76561197960265747", "relationship": "friend", "friend_since": 0 }
]
}
};
$('#tb_friendlist').DataTable( {
data : data.friendslist.friends
, columns : [
{ "data": 'steamid' }
, { "data": 'relationship' }
, { "data": 'friend_since' }
]
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="tb_friendlist" class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</tfoot>
</table>

You will need to provide array in ajax datatable call
$.ajax({
type : 'GET',
url: 'http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&relationship=friend&format=json&steamid=76561197960435530',
success : function(data){
console.log(data.friendslist);
$('#tb_friendlist').DataTable( {
"data": data.friendslist.friends,
"columns": [
{ "data": "steam_id" },
{ "data": "relationship" },
{ "data": "friend_since" }
]
} );
}
});
This might solve your problem

how to create complex table from json using angular 6?

I am trying to create table from the given json. here is json Structure. i am using simple html table to make table structure same like mentioned in below snapshot.as data's are dynamic table structure is not displaying proper in my case.
{
"e_id": "1234",
"e_o_name": "Contact_info",
"matching_details": [
{
"me_value": "value1",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "28 sai",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "a#gmail"
},
{
"me_value": "b#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "29 meena",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "c#gmail.com"
},
{
"me_value": ",d#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
{
"me_value": "value2",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "rimzim",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "p#gmail"
},
{
"me_value": "q#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "ranu",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "t#gmail.com"
},
{
"me_value": ",u#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
]}
above structure is the actual output.I tried creating the same but for
me data's are coming in single row.
enter code here<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr>
<td rowspan="4">data.e_o_name</td>
<td rowspan="2" *ngFor="let match of data.matching_details">{{match.me_value}}</td>
<td>28 sai</td>
<th>a#gmail,b#gmail</th>
<td>100</td>
</tr>
</tbody>
Help for the same is highly appriciated... Thanks in advance

I would prepare proper table rows structure in order to render this complex table.
component.ts(or service.ts)
rows = [];
generateTable() {
if (!this.data) {
return;
}
this.rows.push([
{
text: this.data.e_o_name,
rowspan: 0
}
]);
let maxRowSpan = 0;
this.data.matching_details.forEach((detail, i) => {
const elemRowSpan = Math.max(detail.matching_attributes.length, 1);
maxRowSpan += elemRowSpan;
if (i > 0) {
this.rows.push([])
}
this.rows[this.rows.length - 1].push({
text: detail.me_value,
rowspan: elemRowSpan
});
detail.matching_attributes.forEach((attr, j) => {
if (j > 0) {
this.rows.push([])
}
const mail = attr.me_list[0];
this.rows[this.rows.length - 1].push(
{
text: attr.me_name,
rowspan: 1
},
{
text: mail.me_email_list.map(({ me_value }) => me_value).join(', '),
rowspan: 1
},
{
text: mail.me_percent,
rowspan: 1
}
);
})
});
this.rows[0][0].rowspan = maxRowSpan;
}
template.html
<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr *ngFor="let row of rows">
<td *ngFor="let col of row" [attr.rowSpan]="col.rowspan">{{ col.text }}</td>
</tr>
</tbody>
</table>
Ng-run Example

How to compare data of two jsons and display icons according to result in vue?

I have two arrays filled with JSON data: generalQuestInfo and finishedQuestleafs; object from generalQuestInfo looks like:
{
id: 1,
name: "Breaking News",
alias: "BN",
globalId: 1,
platform: "Win64",
pathway: {
status: "Robot",
name: "start case",
leafs: ["start", "teleport", "take photo", "kill", "finish"]
}
}
finishedQuestleafs looks like:
[
{
name: "start",
questId: 1
},
{
name: "teleport",
questId: 1
},
{
name: "take photo",
questId: 1
},
{
name: "kill",
questId: 1
},
{
name: "finish",
questId: 1
},
{
name: "start",
questId: 2
}
]
Where id from generalQuestInfo equals questId from finishedQuestleafs.
In Vue app I display table with data from generalQuestInfo.
But I need to compare values from generalQuestInfo pathway.leafs with finishedQuestleafs name according to ID. If pahway.leafs is in finishedQuestleafs with same ID, then I need to display fas fa-check icon, in other way - fas fa-crash.
How can I compare data in generalQuestInfo with finishedQuestleafs and display right icons? I tried to use two v-for directives, but it didn't work:(
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'BN' && isActive == 1">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'SAM' && isActive == 2">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-else-if="isActive == 3">
<td>NO INFO</td>
</tr>
</table>
data() {
return {
mainPageInfo: [],
generalQuestInfo: [],
finishedQuestleafs: [],
isActive: 0
}
},

First off create a method that will return appropriate icon. I believe the code of getIconClass method is self-explanatory. Then loop through leafs field in template and display name of the leaf and appropriate icon.
new Vue({
el: "#app",
data() {
return {
generalQuestInfo: [{
"id": 1,
"name": "Breaking News",
"alias": "BN",
"globalId": 1,
"platform": "Win64",
"pathway": {
"status": "Robot",
"name": "start case",
"leafs": ["start", "teleport", "take photo", "kill", "finish"]
}
}],
finishedQuestleafs: [
{ name: "start", questId: 2 },
{ name: "teleport", questId: 1 },
{ name: "take photo", questId: 1 },
{ name: "kill", questId: 1 },
{ name: "finish", questId: 1 },
{ name: "start", questId: 2 }
]
}
},
methods: {
getIconClass(id, leaf) {
return this.finishedQuestleafs.find(item => item.questId === id && item.name === leaf) ? "fa fa-check" : "fa fa-bomb";
}
}
})
.as-console-wrapper { max-height: 100% !important; top: 0; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-for="data in generalQuestInfo" :key="data.id">
<td>{{data.pathway.status}}</td>
<td>{{data.pathway.name}}</td>
<td>
<ul>
<li v-for="(leaf, index) in data.pathway.leafs" :key="index">
<i :class="getIconClass(data.id, leaf)"></i> {{ leaf }}
</li>
</ul>
</td>
</tr>
</table>
</div>

You could try making a method to check while you're in the v-for loop.
<tr v-for="data in generalQuestInfo">
<span v-if="hasQuestFinished(data.id, data.pathway.leafs)">
<!-- display stuff if hasQuestFinished() returned true -->
</span>
</tr>
And in your vue object (assuming you only want to check if its in the array:
methods:{
hasQuestFinished(questID, givenQuests){
finishedQuestleafs.forEach(function(leaf){
if(leaf.questId == questID && givenQuests.indexOF(leaf.name) >= 0){
return true;
}
});
//finished the loop without returning means no match
return false;
}
}

Issue Looping through an array of Objects dynamically using Javascript

Working on a Laravel application whereby am fetching data from the frontend and populating
dynamically on the frontend using Javascript. On the frontend I have partitioned in 2 major columns (left column and right column). On the left column there is a link which when hovered over or clicked the respective policies display on the right side.
The problem is am finding it quite difficult to iterate the policies array which contains a collection of Javascript objects and display them dynamically in the table.
When I use the method below I get [object Object] in the table body
asm variable from the backend
"agency_sales": [
{
"id": "111",
"policies": [
{
"name": "JOHN DOE 1",
"sum_covered": "555000",
"date": "2018-05-16 12:02:32"
},
{
"name": "JOHN DOE 2",
"sum_covered": "404000",
"date": "2018-02-20 17:33:25"
},
]
}
{
"id": "222",
"policies": [
{
"name": "JOHN DOE 1",
"sum_covered": "555000",
"date": "2018-05-16 12:02:32"
},
{
"name": "JOHN DOE 2",
"sum_covered": "404000",
"date": "2018-02-20 17:33:25"
},
]
}
]
Left column containing the link with a dynamic id
<div class="col-md-4">
#foreach($asm as $a)
Agency Sales Managers ID : {{ $a['id'] }}
#endforeach
</div>
Right column containing the table I would like to populate dynamically
<div class="col-md-8">
<table class="table table-hover mg-b-0 tx-11" id="summary-table">
<thead>
<tr>
<th>NAME</th>
<th>SUM</th>
<th>DATE</th>
</tr>
</thead>
<tbody>
<tr> <!-- Add policies dynamically via JS under respective thead columns--></tr>
</tbody>
</table>
</div>
JavaScript Code
$( document ).ready(function() {
var asmData = {!! json_encode($asm) !!};
});
$(document).on("mouseenter", "a", function() {
//Make sure table is empty
$('#summary-table tbody tr').html('');
//Execute ASM
var asmPolicies = '';
//Fetch id of a tag in the DOM
var asmId = $(this).attr('id');
for(var i = 0; i < asmData.length; i++) {
if(asmId == asmData[i]['id']) {
for(var j = 0; j < asmData[i]['policies'].length; j++){
asmPolicies += '<tr><td>' + asmData[i]['policies'][j] + '</td></tr>';
}
}
}
//append asmPolicies Html to the table
$('#summary-table tbody tr').append(asmPolicies);
//END ASM
});

Several issues - the main ones are
faulty JSON
not parsing the object
appending trs to trs instead of the tbody
Note the use of data attribute on the link
const asmData = [{
"id": "111",
"policies": [{
"name": "JOHN DOE 1",
"sum_covered": "555000",
"date": "2018-05-16 12:02:32"
},
{
"name": "JOHN DOE 2",
"sum_covered": "404000",
"date": "2018-02-20 17:33:25"
}
]
}, {
"id": "222",
"policies": [{
"name": "JOHN DOE 3",
"sum_covered": "555000",
"date": "2018-05-16 12:02:32"
},
{
"name": "JOHN DOE 4",
"sum_covered": "404000",
"date": "2018-02-20 17:33:25"
}
]
}]
$(document).on("mouseenter", "a", function() {
var $tb = $('#summary-table tbody');
//Make sure table is empty
$tb.empty()
var asmId = $(this).attr('data-id'),
asmPolicies = "";
for (var i = 0; i < asmData.length; i++) {
if (asmId == asmData[i]['id']) {
for (var j = 0; j < asmData[i]['policies'].length; j++) {
var pol = asmData[i]['policies'][j];
asmPolicies += '<tr><td>' + pol.name + '</td><td>' + pol.sum_covered + '</td><td>' + pol.date + '</td><td>' + '</td></tr>';
}
}
}
//append asmPolicies Html to the table
$tb.append(asmPolicies);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
111 | 222
<div class="col-md-8">
<table class="table table-hover mg-b-0 tx-11" id="summary-table">
<thead>
<tr>
<th>NAME</th>
<th>SUM</th>
<th>DATE</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Add policies dynamically via JS under respective thead columns-->
</tr>
</tbody>
</table>
</div>

Comparing 2 different set of data array

I have an app that are retrieving 2 sets of data. Now I want to do is get the brand of data1 and and the brand of data2 which depends on the date, if true it will render the amount of data2.
so far this is my code
-my data
const data1 = [
{
"data1result": [
{
"brand": "brand1"
},
{
"brand": "brand2"
},
{
"brand": "brand3"
},
{
"brand": "brand4"
}
]
}
];
const data2 = [
{
"data2result": [
{
"date": "12-01",
"details": [
{
"amount": 24250,
"brand": "brand1"
},
{
"amount": 68350,
"brand": "brand2"
},
{
"amount": 60,
"brand": "brand3"
},
{
"amount": 11078,
"brand": "brand4"
}
]
},
{
"date": "12-02",
"details": [
{
"amount": 27340,
"brand": "brand1"
},
{
"amount": 16500,
"brand": "brand2"
},
{
"amount": 210,
"brand": "brand3"
},
{
"amount": 23229,
"brand": "brand4"
}
]
},
]
}
];
and as for my code
export default React.createClass({
render() {
<table>
<thead>
<tr>
<th></th>
{
data1.map(function(i) {
return <th>{i.data1result.brand}</th>;
})
}
</tr>
</thead>
<tbody>
{data2.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{a.data2result.date}</b></td>
//help me here
<td className="td-fixed">brand1 amount of date **-**</td>
<td className="td-fixed">brand2 amount of date **-**</td>
<td className="td-fixed">brand3 amount of date **-**</td>
<td className="td-fixed">brand4 amount of date **-**</td>
</tr>
)
})}
</tbody>
</table>
}
})
and the result should be like this

You can map over an array and not an object. In your case to render the brand amounts just create a nested map function assuming the order of brand values is the same. Also have a look at how the outer map is created. Also you must have a return statement in you react class .
var App = React.createClass({
render() {
const data1=[{data1result:[{brand:"brand1"},{brand:"brand2"},{brand:"brand3"},{brand:"brand4"}]}];
const data2=[{data2result:[{date:"12-01",details:[{amount:24250,brand:"brand1"},{amount:68350,brand:"brand2"},{amount:60,brand:"brand3"},{amount:11078,brand:"brand4"}]},{date:"12-02",details:[{amount:27340,brand:"brand1"},{amount:16500,brand:"brand2"},{amount:210,brand:"brand3"},{amount:23229,brand:"brand4"}]}]}];
return (
<table>
<thead>
<tr>
<th></th>
{
data1[0].data1result.map(function(i) {
return <th>{i.brand}</th>;
})
}
</tr>
</thead>
<tbody>
{data2[0].data2result.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{a.date}</b></td>
{a.details.map(function(item){
return (
<td className="td-fixed">{item.amount}</td>
)
})}
</tr>
)
})}
</tbody>
</table>
)
}
})
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Adding a map to your data2result[].details, you should be able to render the columns for each brand:
export default React.createClass({
render() {
<table>
<thead>
<tr>
<th></th>
{
data1.map(function(i) {
return <th>{ i.data1result.brand }</th>;
})
}
</tr>
</thead>
<tbody>
{
data2.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{ a.data2result.date }</b></td>
{
a.details.map(function(b) {
<td className="td-fixed">{ b.amount }</td>
})
}
</tr>
)
})
}
</tbody>
</table>
}
})

You can try something like this:
Note: This answer just address part of processing data and not binding values to React UI
const data1=[{data1result:[{brand:"brand1"},{brand:"brand2"},{brand:"brand3"},{brand:"brand4"}]}];
const data2=[{data2result:[{date:"12-01",details:[{amount:24250,brand:"brand1"},{amount:68350,brand:"brand2"},{amount:60,brand:"brand3"},{amount:11078,brand:"brand4"}]},{date:"12-02",details:[{amount:27340,brand:"brand1"},{amount:16500,brand:"brand2"},{amount:210,brand:"brand3"},{amount:23229,brand:"brand4"}]}]}];
var result = {};
data1[0].data1result.forEach(function(brand){
data2[0].data2result.forEach(function(res){
result[res.date] = result[res.date] || {};
var amount = res.details.reduce(function(p,c){
p += c.brand === brand.brand ? c.amount : 0;
return p;
}, 0)
if(amount > 0)
result[res.date][brand.brand] = amount;
})
});
console.log(result)

Try this:
export default React.createClass({
render() {
<table>
<thead>
<tr>
<th></th>
{
data1[0].data1result.map(function(i) {
return <th>{ i.brand }</th>;
})
}
</tr>
</thead>
<tbody>
{
data2[0].data2result.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{ a.date }</b></td>
{
a.details.map(function(b) {
<td className="td-fixed">{ b.amount }</td>
})
}
</tr>
)
})
}
</tbody>
</table>
}
})

Categories

Resources