I was trying to bind simple JSON data to <table>. But, my html page is showing empty data, but the row count is showing as per data. The data inside each <tr> is empty. Not sure what's wrong with my code.
Can someone help me if I am doing anything wrong here?
Pay.Component.ts
#Component({
moduleId: module.id,
templateUrl: './pay.component.html'
})
export class PayComponent {
myData: any[] = [
{
"Col1": "120f2dcf-d4a4-4b3c-994a-e4e0c79bd642",
"Col2": "2017-03-27T00:00:00-07:00",
"Col3": "Testing1"
},
{
"Col1": "320f2dcf-d4a4-4b3c-994a-e4e0c79bd642",
"Col2": "2018-03-27T00:00:00-07:00",
"Col3": "Testing2"
}]
}
pay.component.html
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let pay of myData'>
<td>{{ pay.col1 }}</td>
<td>{{ pay.col2 }}</td>
<td>{{ pay.col3 }}</td>
</tr>
</tbody>
</table>
</div>
Not sure what's going wrong with code.
My bad. I found the issue as i was using lower case when the data was binding to the table.
Fixed the issue after changing to UPPER Case {{ pay.Col1 }}
Related
Now I know this is a very common topic but I'm not getting any solutions from the SO questions that I saw till now. I'm currently working on a page that has a DataTable whose data is coming from the controller and by using ng-repeat. However, the case here is that I have to use two ng-repeats on the table.
The JSON is as below:
{
"mainData": [
{
"goal": "ValueOne",
"array": [
{
"LowerKeyOne": "LowerValueOne",
"LowerKeyTwo": "LowerValueOne",
"LowerKeyThree": "LowerValueOne"
},
{
"LowerKeyOne": "LowerValueTwo",
"LowerKeyTwo": "LowerValueTwo",
"LowerKeyThree": "LowerValueTwo"
}
]
},
{
"goal": "ValueTwo",
"array": [
{
"LowerKeyOne": "LowerValueThree",
"LowerKeyTwo": "LowerValueThree",
"LowerKeyThree": "LowerValueThree"
},
{
"LowerKeyOne": "LowerValueFour",
"LowerKeyTwo": "LowerValueFour",
"LowerKeyThree": "LowerValueFour"
}
]
}
]
}
The HTML is as below:
<div class="ibox-content table-responsive">
<div ng-repeat="data in mainData">
<div ng-repeat="cond in data.array">
<table datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr class="table-tr-th">
<th>Header</th>
<th>Other Header</th>
<th>Another Header</th>
<th>Extra Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{data.goal}}</td>
<td>{{cond.LowerKeyOne}}</td>
<td>{{cond.LowerKeyTwo}}</td>
<td>{{cond.LowerKeyThree}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I've used many different options, like e.g -
Adding ng-repeat="(key, value) in JSONObject" ng-if="key=='mainData'" in <tbody>
Two ng-repeats, one in <tbody> and one in <tr> after <tbody>
Adding <div> tags before <table> and also tried adding before <tbody> (before <tbody> as it was suggested in one of the SO answers on the same topic)
The last option resulted me in the following error -
Error: Expected expression in form of "item in collection[ track
by id]" but got "{0}"
Also tried using limitTo:1 filter, but no resulted no success.
Any helpful comment is welcome. Thanks!
Do you need something like this?
JSFiddle demo
<table ng-repeat="data in data.mainData | limitTo: 1">
<thead>
<tr>
<th>Header</th>
<th>Other header</th>
<th>Another header</th>
<th>Extra header</th>
</tr>
</thead>
<tbody ng-repeat="data in data.mainData track by #index">
<tr ng-repeat="d in data.array">
<td>{{data.goal}}</td>
<td>{{d.LowerKeyOne}}</td>
<td>{{d.LowerKeyTwo}}</td>
<td>{{d.LowerKeyThree}}</td>
</tr>
</tbody>
</table>
Including the specific part of your needs for your comment and answer.
#Mistalis's answer is almost correct, but in my case I had to make a few changes to get the solution and hence have posted this answer.
The solution is -
<table ng-repeat="data in data.mainData | limitTo: 1">
<thead>
<tr>
<th>Header</th>
<th>Other header</th>
<th>Another header</th>
<th>Extra header</th>
</tr>
</thead>
<tbody ng-repeat="data in data.mainData track by #index">
<tr ng-repeat="d in data.array">
<td>{{data.goal}}</td>
<td>{{d.LowerKeyOne}}</td>
<td>{{d.LowerKeyTwo}}</td>
<td>{{d.LowerKeyThree}}</td>
</tr>
</tbody>
</table>
Not yet sure as to why had to write ng-repeat="data in mainData" twice.
I am using angular datatables https://l-lin.github.io/angular-datatables and noticed that the ng-repeat is done twice. I noticed it with the following directive.
<tr ng-repeat="order in vm.orders track by order.id" repeatlogger>
app.directive('repeatlogger', function() {
return function (scope, element, attrs) {
console.log(scope.$index);
}
I am using the Angular way, see HTML tab at https://l-lin.github.io/angular-datatables/#/angularWay
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in vm.persons | limitTo: 50" repeatlogger>
<td>{{ person.ID }}</td>
<td>{{ person.Firstname }}</td>
<td>{{ person.Lastname }}</td>
</tr>
</tbody>
</table>
Using a ng-repeat on a div shows that it iterates once over the collection.
Which reasons exist, that angular-datatables iterates twice over the collection?
From a Rest Api I am getting the following:
{
"headers": ["h1", "h2"],
"body": [{"h1": "a1", "h2":"a2"},
{"h1": "b1", "h2":"b2"},
... ]
}
Now I would like to transform this one into an (orderable table) with angular. I tried:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="header in data.headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="line in data.body">
<td ng-repeat="(key, val) in line">{{ val | date : "dd.MM.yy" }}</td>
</tr>
</tbody>
</table>
Of course it does not work, as objects do not have a key order in javascript.
Is there a simple way to sort the line by headers?
You can do this very simple:
<tr ng-repeat="line in data.body">
<td ng-repeat="header in data.headers">{{ line[header] | date : "dd.MM.yy" }}</td>
</tr>
Here , i wanna retrieve my subdocument array data from nested JSON object using Angular ng-repeat
this is my JSON nested object:
[
{
_id: "5693bc169f5d75301ff5999d",
booking:
[
{
can_name: "Kinley",
can_quantity: "5",
can_cost: "200",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "18214",
address: "140,Bajanai koil street, Melmanagar,Poonamallee,Chennai",
_id: "5694926fd6227ee408b9d051",
ordered_at: "2016-01-12T05:43:11.076Z",
status: "UnderProcess"
}
]
},
{
_id: "5693baf07fe08c6012034b13",
booking:
[
{
can_name: "Kinley",
can_quantity: "4",
can_cost: "160",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "14426",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "569491fad6227ee408b9d04f",
ordered_at: "2016-01-12T05:41:14.531Z",
status: "UnderProcess"
},
{
can_name: "Bisleri",
can_quantity: "5",
can_cost: "250",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "11391",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "5694923ad6227ee408b9d050",
ordered_at: "2016-01-12T05:42:18.900Z",
status: "UnderProcess"
}
]
}
]
Angular Controller Code:
$http.get('/auth/booking-date/' + id).success(function(response){
$scope.todaylist = response;
console.log(response);
$scope.today = '';
});
Here, how can i use ng-repeat to retrieve every subdocument data.
this is what am tried, but am not able get every data:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<td>{{today._id}}</td>
<td>{{today.booking[0].address}}</td>
<td>{{today.booking[0].can_name}}</td>
<td>{{today.booking[0].can_quantity}}</td>
<td>{{today.booking[0].can_cost}}</td>
<td>{{today.booking[0].delivery_timeslot}}</td>
<td>{{today.booking[0].delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
Help will be appreciated...
See above i posted my JSON data instead of Link
I am not sure but check if this solves your problem:
<tr ng-repeat="today in todaylist">
<div ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
I am just applying my logic directly here. Try this:
<tbody ng-repeat="today in todaylist">
<tr ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
Also, try removing this line, I guess it because this line will replace current content of today, and hence no data will be displayed:
$scope.today = '';
Just use the below code
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<div ng-repeat="booking in today.booking">
<td>{{today._id}}</td>
<td>{{booking.address}}</td>
<td>{{booking.can_name}}</td>
<td>{{booking.can_quantity}}</td>
<td>{{booking.can_cost}}</td>
<td>{{booking.delivery_timeslot}}</td>
<td>{{booking.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
</tbody>
</table>
</div>
It looks like your objects are stored in the booking array. To iterate through this array and add a new row on your DOM for each item in your array, I'd suggest the following:
<tbody>
<tr ng-repeat="booking in todaylist.booking">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>
For the sake of clarity, you may want to change the variable name of your array from booking to bookings. I find it less confusing to keep the variable names of collections as plural nouns. This makes it easier to easily identify what to expect in your collection.
With that change, you'd have:
<tbody>
<tr ng-repeat="booking in todaylist.bookings">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>
I'm using angularJS to create an table. But it didn't works so great atm.. here my problem.
Code:
appGenerator.controller('customersCtrl', function ($scope) {
$scope.names = [
{"Name": "EMAIL", "StringValue": "dsa#dsada", "Type": "C"},
{"Name": "DESC", "StringValue": "Test","Type": "C"}
];
});
HTML:
<table class="table">
<tr ng-repeat="tableItem in names">
<td ng-repeat="item in tableItem">{{item}}</td>
</tr>
</table>
At the moment I get the whole Item. But I want the the "StringValue".
I tested
<td ng-repeat="item in tableItem">{{item.StringValue}}</td>
But it doesn't works. I don't get any output. What I'm doing wrong?
You should do it like the following;
<table class="table">
<tr ng-repeat="tableItem in names">
<td>{{ tableItem.name }}</td>
<td>{{ tableItem.StringValue }}</td>
<td>{{ tableItem.Type }}</td>
</tr>
</table>
You already iterated the names. Then you should use the object.
Your second ng-repeat is on object's {"key": "value"} pair so ng-repeat should be as follows:
<table class="table">
<tr ng-repeat="tableItem in names">
<td ng-repeat="(key, value) in tableItem">{{key}} {{value}}</td>
</tr>
</table>
Please refer: How can I iterate over the keys, value in ng-repeat in angular