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
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;
});
/*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).
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
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>
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>