to order object contain dates in html view by angularjs - angularjs

I have to arrange status(P,A) according to date in ascending order but it showing me in same order as they are inserted. but i want to arrange accourding to date.
API Data:-
$scope.students{
"name": "sample",
"def": [
{
"setId": "arun",
"Date": [
{
"day": "2016-09-28",
"status": "A"
},
{
"day": "2016-09-27",
"status": "P"
},
{
"day": "2016-09-29",
"status": "A"
},
{
"day": "2016-09-26",
"status": "P"
}
]
},
{
"name": "deepak",
"Date": [
{
"day": "2016-09-28",
"status": "P"
},
{
"day": "2016-09-27",
"status": "A"
},
{
"day": "2016-09-29",
"status": "A"
},
{
"day": "2016-09-26",
"status": "P"
},
]
}
]
}
html page :-
<table>
<tbody>
<tr>
<td>S.No.</td>
<td>NAME</td>
<td>26-9-2016</td>
<td>27-9-2016</td>
<td>28-9-2016</td>
<td>29-9-2016</td>
</tr>
<tr data-ng-repeat="student in students" st-select-row="row">
<td data-ng-bind="$index+1"></td>
<td data-ng-bind="student.name"></td>
<td data-ng-repeat="data in student.Date" data-ng-bind="data.status"></td>
</tr>
</tbody>
</table>
want to show on screen in this way:
1. Name | 26-9-2016 | 27-9-2016 | 28-9-2016 | 29-9-2016|
2. Arun | P | P | A | A |
3. dDepak | P | A | P | A |
but i am getting in this way on screen :
1. Name | 26-9-2016 | 27-9-2016 | 28-9-2016 | 29-9-2016|
2. Arun | A | P | A | p |
3. Deepak | P | A | A | P |

angular.module('myApp', ['ng'])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.students = {
"name": "sample",
"def": [{
"name": "arun",
"Date": [
{
"day": "2016-09-28",
"status": "A"
}, {
"day": "2016-09-27",
"status": "P"
},
{
"day": "2016-09-29",
"status": "A"
},
{
"day": "2016-09-26",
"status": "P"
}
]
}, {
"name": "deepak",
"Date": [{
"day": "2016-09-28",
"status": "P"
}, {
"day": "2016-09-27",
"status": "A"
}, {
"day": "2016-09-29",
"status": "A"
},
{
"day": "2016-09-26",
"status": "P"
},
]
}]
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
<table>
<tbody>
<tr>
<td>S.No.</td>
<td>NAME</td>
<td>26-9-2016</td>
<td>27-9-2016</td>
<td>28-9-2016</td>
<td>29-9-2016</td>
</tr>
<tr data-ng-repeat="student in students.def" st-select-row="row">
<td data-ng-bind="$index+1"></td>
<td data-ng-bind="student.name"></td>
<td data-ng-repeat="data in student.Date | orderBy :'day'" data-ng-bind="data.status"></td>
</tr>
</tbody>
</table>
</body>
The Json data has some keys with wrong names so from your question made a bit assumption and did changes in your HTML part.
<tr data-ng-repeat="student in students.def" st-select-row="row">
<td data-ng-bind="$index+1"></td>
<td data-ng-bind="student.name"></td>
<td data-ng-repeat="data in student.Date | orderBy :'day'" data-ng-bind="data.status"></td>
</tr>
Just use orderBy and provide the key to perform ordering in your case 'day'

Related

retrieve JSON list with absent Object and replace them by null using Angular2

Here is my JSON array :
"user" : {
"id": 456,
"nickname": "xxx",
"pf": {
"id": 123,
"account": [
{
"accountid": 1494235749,
"status": "New",
"accountnbr": 12345,
"cyc": {
"cycid": 1494404053,
"active": true,
"status": "New",
"name": "QST192017",
},
},
{
"accountid": 1494403399,
"status": "New",
"accountnbr": 915177,
"cyc": {
"cycleid": 1494406299,
"active": true,
"status": "Closed",
"name": "QSL342014"
}
},
{
"accountid": 1494500399,
"status": "New",
"accountnbr": 90010,
}
]
},
}
And this is what I have in my template :
<tr *ngFor="let account of accounts">
<td>{{ account.accountnbr }}</td>
<td>{{ account.cyc.name}}</td>
</tr>
I tried to retrieve a list of all my accounts , and as you can see one of the account has no cyc, and shows an error , any idea how to replace absent JSON object by null in the list ?
PS : I'm using angular2
Thank you.
/K
use account.cyc?.name will solve your problem. when account doesn't have cyc, your template will just show blank without any error.
see documentation of safe-navigation-operator(?).
<tr *ngFor="let account of accounts">
<td>{{ account.accountnbr }}</td>
<td>{{ account.cyc?.name}}</td>
</tr>
This is as simple as using an *ngIf:
<div *ngFor="let acc of account">
<div *ngIf="!acc.cyc">NO CYC ON THIS ACCOUNT</div>
</div>
For this purpose an absent object is null/undefined.
You could also map over the object in your component and set it as null:
account.map(x =>{
if(!x.cyc){
x.cyc = null;
}
return x;
});

how to get particular customers order

/*factory method for getting particular customers order*/
factory.getCustomer = function(customerId) {
for(var i=0,len=customers.length ; i<len ; i++) {
if(customers[i].id === parseInt(customerId)){
return customer[i];
}
}
return {};
};
return factory();
/*Controller*/
myApp.controller('OrdersController',['$scope','$routeParams','customersFactory', function($scope,$routeParams,customersFactory) {
var customerId = $routeParams.customerId;
$scope.customer = null;
function init() {
$scope.customer = customersFactory.getCustomer(customerId);
}
init();
}]);
/*View*/
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>{{customer.name}}'s Orders</h2>
<table class="table table-hover">
<tr>
<th>Product</th>
<th>Total</th>
</tr>
<tr ng-repeat="order in customer.orders">
<td>{{ order.product }}</td>
<td>{{ order.total | currency }}</td>
</tr>
</table>
</div>
</div>
</div>
/*JSON FILE*/
{
"id": "1",
"joined": "2000-12-2",
"name": "Wali",
"city": "Dubai",
"orderTotal": "9.0765",
"orders": [
{
"id": "1",
"product": "protein",
"total": "11.987"
}
]
},
{
"id": "2",
"joined": "2004-12-2",
"name": "Ali",
"city": "London",
"orderTotal": "20.0765",
"orders": [
{
"id": "2",
"product": "bcca",
"total": "2.3456"
},
{
"id": "3",
"product": "baseball",
"total": "4.3456"
}
]
},
{
"id": "3",
"joined": "1980-11-2",
"name": "Zen",
"city": "Australia",
"orderTotal": "6.500",
"orders": [
{
"id": "3",
"product": "chocolate",
"total": "6.4567"
}
]
}
I have made a customers table from which we can perform the CRUD functionality, but when I click to check the particular customer order it is redirecting me to the right view via routing but particular customers orders are not displaying.
can any one suggest a solution for this?
According to your JSON data, the ID is a String, but you are parsing it into an integer, and using ===, which will match only if the value and the type of the compared variables match.
You need to change the if statement, one option is:
if (parseInt(customers[i].id) === parseInt(customerId))
Another option will be:
if (customers[i].id == customerId)
And yet another option is using angular's $filter service.
You need to inject it into your factory, and than in order to get the client, you can use:
var customer = $filter('filter')(customers, {id: customerId.toString()}, true);
return customer.length === 1 ? customer[0] : null;
The toString part is only because your JSON data have ID as as string, and the third argument is set to true to prevent 'like' filter (default $filter behavior will return id 10 for example also if the customerId is 1).

AngularJS - How do I filter an array of 'deep' objects given an array of values to filter by?

I am trying to filter my data which I am getting from a HTTP GET endpoint by an array of values
filters = ['Full Time', 'LinkedIn', ...]
The general structure of the response I am getting back is an array of objects where each object can look like this:
{
"preferences": {
"jobType": {
"type": "Full Time"
}
},
"profile": {
"additionalinfo": {
"organization": [
{
"name": "Google"
},
{
"name": "LinkedIn"
}
],
"university": [
{
"name": "UC Berkeley",
"degrees": [ {"name": "Computer Engineering"}]
}
}
}
}
So if I filter by ["Google", "Full Time"], the above object should be included.
Is there a built in filter to handle this?
I am having trouble writing the custom filter to handle such a heavily nested object.
Any ideas on how to implement this?
You can use built in filter like this jsfiddle
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.data = [{
"preferences": {
"jobType": {
"type": "Full Time"
}
},
"profile": {
"additionalinfo": {
"organization": [{
"name": "Google"
}, {
"name": "LinkedIn"
}],
"university": [{
"name": "UC Berkeley",
"degrees": [{
"name": "Computer Engineering"
}]
}]
}
}
}, {
"preferences": {
"jobType": {
"type": "Remote"
}
},
"profile": {
"additionalinfo": {
"organization": [{
"name": "Yandex"
}, {
"name": "LinkedIn"
}],
"university": [{
"name": "UC Berkeley",
"degrees": [{
"name": "Computer Engineering"
}]
}]
}
}
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>Jobs</h3>
<input ng-model="filterModelJobType" placeholder="filter jobType">
<input ng-model="filterModelJob" placeholder="filter job">
<table class="table table-striped table-bordered">
<tbody>
<tr ng-repeat="x in data|filter:{profile: {additionalinfo:{organization:{name:filterModelJob}}},preferences: {jobType:{type:filterModelJobType}}}">
<td>{{ $index + 1 | number }}</td>
<td class="text-center">{{ x.preferences.jobType.type }}</td>
<td class="text-left">
<div ng-repeat="org in x.profile.additionalinfo.organization">
<hr> {{org.name}}
</div>
</td>
</tr>
</tbody>
</table>
</body>
In the latest version of AngularJS
If there is nested object then
var foo = $filter('filter')($scope.welcome, {
additionalinfo: { name: 'google' }
});
Reference: GitHub issue

Angular repeat structure based on value

I have a following json structure that I would like to turn into table.
What would be the best approach here? Groups 1 and -1 would represent Positive and Negative respectivly. These can or cannot be presented in data, but must be defined in table.
Expected result
| Very Positive | Positive | Neutral | Negative | Very Negative |
-----------+---------------+----------+---------+----------+---------------|
Cleaniness | 16 | 0 | 11 | 0 | 30 |
Staff | 20 | 0 | 15 | 0 | 37 |
-----------+---------------+----------+---------+----------+---------------|
Data:
{
"Cleanliness": [
{
"group": "-2",
"count": 30
},
{
"group": "0",
"count": 11
},
{
"group": "2",
"count": 16
}
],
"Staff": [
{
"group": "-2",
"count": 37
},
{
"group": "0",
"count": 15
},
{
"group": "2",
"count": 20
}
]
}
Any help appreciated, thanks in advance!
You can do using ngRepeat on a fixed array of values ng-repeat="pos in [2, 1, 0, -1, -2]":
var app = angular.module('demo', []);
app.controller('demoCtrl', function() {
var stats = {
"Cleanliness": [{
"group": "-2",
"count": 30
}, {
"group": "0",
"count": 11
}, {
"group": "2",
"count": 16
}],
"Staff": [{
"group": "-2",
"count": 37
}, {
"group": "0",
"count": 15
}, {
"group": "2",
"count": 20
}]
};
/** we want to transform original data to this structure
[{
name: "Cleanliness",
data: {
'-2': 30,
'0': 11,
'2': 16
}
}, {
name: "Staff",
data: {
'-2': 37,
'0': 15,
'2': 20
}
}]
**/
this.stats = Object.keys(stats).map(function(category) {
return {
name: category,
data: stats[category].reduce(function(obj, stat) {
obj[stat.group] = stat.count;
return obj;
}, {})
};
});
});
table {
border-collapse: collapse;
}
th,
td {
padding: 0 3px;
border: 1px solid blue;
}
td:not(:first-child) {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="demoCtrl as demo">
<table>
<thead>
<tr>
<th></th>
<th>Very Positive</th>
<th>Positive</th>
<th>Neutral</th>
<th>Negative</th>
<th>Very Negative</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="category in demo.stats">
<td>{{category.name}}</td>
<td ng-repeat="pos in [2, 1, 0, -1, -2]">
{{category.data[pos] || 0}}
</td>
</tr>
</tbody>
</table>
</div>

Draw a matrix array based in AngularJS

I need to draw a table in AngularJS based on the following array
$scope.list = [
{ "Row":1, "Column": 1, "Value": "11" },
{ "Row":1, "Column": 2, "Value": "12" },
{ "Row":1, "Column": 3, "Value": "13" },
{ "Row":2, "Column": 1, "Value": "21" },
{ "Row":2, "Column": 2, "Value": "22" },
{ "Row":2, "Column": 3, "Value": "23" },
];
So I need to get a table with 2 rows and 3 columns
I understand that I have to use two nested ngRepeat but I couldn't make it work
Please could you help me ??
Regards
I developed the solution I found a filter 'Unique' here
For each unique row number I get the list of columns
<table border="2">
<tr ng-repeat="row in list | unique:'Row'">
<td>Row: {{row.Row}}</td>
<td ng-repeat="col in list | filter:{'Row':row.Row}">{{col.Value}}</td>
</tr>
</table>
You should first transform your array to such one:
$scope.table = [
["11", "12", "13"],
["21", "22", "23"],
];
That way, it will be easier to iterate over the values in your view:
<table>
<tr ng-repeat="row in table">
<td ng-repeat="column in row">
{{column}}
</td>
</tr>
</table>

Resources