good morning, i got a problem, or not necessary a problem with an iteration, for example i got the next values from a json document, after that i converted all data in an array, but i cannot iterate all items that it array contains, can somebody hel me to do this.
This code shows the data of the array:
[
0: {
info: [
0: {
//data here
},
1: {
//data here
},
length: 2
],
},
length: 1
]
I have tried with
<table>
<thead>
<tr>
<th>
<!--th>title here<th-->
</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-item [ngForOf]="data" let-i="index" >
<tr
<td>
`{{ item.info[i].dataItem }}` <!--th>example<th-->
</td>
</tr>
</ng-template>
</tbody>
</table>
Or only with *ngFor="let item of data"
But it always only shows all data of the first position, i´m new in angular and i don´t know how to increment the i value to iterate all the elements.
Thanks
Related
I have searched for a similar example and found lost of examples but none of them have the same datastructure as my json data so I have tried it all without success. This is my json data
vm.result = [
{
'first': [
{"indicate":"all", "text":"All views"},
{"indicate":"userview", "text":"User view"},
{"indicate":"operatorview", "text":"Operator view"}
]
},
{
'second': [
{"indicate":"receipts","text":"Receipts"},
{"indicate":"other", "text":"Other"},
{"indicate":"error", "text":"Error resolver"}
]
}
];
This is my table
<table class="table" >
<thead>
<tr>
<th ng-show="column">Key</th>
<th>Master</th>
<th>Editable</th>
</tr>
</thead>
<tbody ng-repeat="res in vm.result track by $index">
<tr ng-repeat="ed in res.first | filter: searchfield | orderBy: 'indicate' track by $index">
<td {{ed.indicate}}</td>
<td>{{ed.text}}</td>
<td> {{vm.result[1].second[$index].indicate}}</td>
<td > {{vm.result[1].second[$index].text}}</td>
</tr>
</tbody>
</table>
OrderBy only works for the first array but not the second and yes I have tried removing first after re in the second ng-repeat but then it cannot recognize it as an array. I need this structure in the table so that each array has its own columns for its data. So how to I add orderBy indicate for both arrays?
Expected output:
Master Editable
all | All | receipts | Receipts
userview | User view | other |Other
The format of result data is very poor. It is very hard to convert your expected output.
Try to use result array like this or convert to this type of format,
$scope.newResult = [{
first:{"indicate":"all", "text":"All views"},
second:{"indicate":"receipts","text":"Receipts"}
},
{
first:{"indicate":"userview", "text":"User views"},
second:{"indicate":"other","text":"Other"}
},
{
first:{"indicate":"operatorview", "text":"Operator views"},
second:{"indicate":"error","text":"Error resolver"}
}
]
HTML Code
<table >
<thead>
<tr>
<th>Key</th>
<th colspan="2">Master</th>
<th colspan="2">Editable</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="res in new">
<td>{{$index+1}}</td>
<td>{{res.first.indicate}}</td>
<td>{{res.first.text}}</td>
<td>{{res.second.indicate}}</td>
<td>{{res.second.text}}</td>
</tr>
</tbody>
</table>
Controller
$scope.result = [
{
'first': [
{"indicate":"all", "text":"All views"},
{"indicate":"userview", "text":"User view"},
{"indicate":"operatorview", "text":"Operator view"}
]
},
{
'second': [
{"indicate":"receipts","text":"Receipts"},
{"indicate":"other", "text":"Other"},
{"indicate":"error", "text":"Error resolver"}
]
}
];
$scope.new=[];
angular.forEach($scope.result, function(value, key) {
if(key ===0){
angular.forEach(value.first, function(val, k) {
$scope.new.push({'first':val,'second':''});
})
}
if(key ===1){
angular.forEach(value.second, function(val, k) {
$scope.new[k].second = val;
})
}
});
Using this type of mechanism you can get the expected output, but the better way is using good data format for result array.
jsfiddle for this.
I want to display something like this inside an ng-repeat: display a span tag saying the total purchase right after the last purchase of each person.( I do not want to display the total after each purchase). I have an array of object like this :
let group=[{name:'Brandon Pack',city:'NY',purchase:25,accepted:true},
{name:'Josh Vilet',city:'Memphis',purchase:30,accepted:true},
{name:'Brandon Pack',city:'NY',purchase:62,accepted:true},
{name:'Patrick Whiteside',city:'NY',purchase:50,accepted:false},
{name:'Josh Vilet',city:'Memphis',purchase:50,accepted:true}]
I can get the total, my problem is with the view that I don't want to display the total only after the last ocurence for that person
First of all, you can create a function in your controller in order to get the total amount:
$scope.getTotal = function () {
var sum = 0;
$scope.group.forEach(function(customer){
sum += customer.purchase;
});
return sum;
}
By the way, you can't declare variables with whitespaces in their name, like "let group", better call it "letGroup".
Then, you just have to create your table in Html:
<table>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Purchase</th>
<th>Accepted</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="o in group">
<td ng-bind="o.name"></td>
<td ng-bind="o.city"></td>
<td ng-bind="o.purchase"></td>
<td ng-bind="o.accepted ? 'Yes': 'No'"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total</td>
<td ng-bind="getTotal()"></td>
</tr>
</tbody>
</table>
I have following json and need to display its name in the table as "PAY ALL", "PAY PART", "DECLINE", but the key contains the spaces in it also its corresponding value for pay all, pay part need to be displayed in corresponding table row data. How can I achieve it.
My json object is as follow-
$scope.tableData={
"KEY-1": "VALUE-1",
"KEY-2": "VALUE-2",
"data": {
"PAY ALL": {
"NumberOfBills": "1800000",
"CummalativeBillAmount": "45000000",
"ResponseProgress": "60"
},
"PAY PART": {
"NumberOfBills": "6000000",
"CummalativeBillAmount": "15000000",
"ResponseProgress": "20"
},
"DECLINE": {
"NumberOfBills": "3000000",
"CummalativeBillAmount": "7500000",
"ResponseProgress": "10"
},
"REQUEST EXTENSION": {
"NumberOfBills": "240000",
"CummalativeBillAmount": "6000000",
"ResponseProgress": "8"
}
}
}
Also I need to achieve following table as from the above json response -
I tried the following in my html binding, but it does not show up anything.
<tr ng-repeat="dataValue in tableData">
<td><img src="./assets/images/Group 384#2x.png" class="img-bo"/></td>
<td>{{dataValue.data["PAY ALL"]}}</td>
<td><div class="bg">{{dataValue.data.NumberOfBills}}</div></td>
<td><div class="bg">{{dataValue.data.CummalativeBillAmount}}</div></td>
<td><div class="bg">{{dataValue.data.ResponseProgress}}</div></td>
</tr>
Please help.
Your code should be something like
<table>
<tr>
<th>category </th>
<th>no of bills</th>
<th>commulative amount</th>
<th>response</th>
</tr>
<tr ng-repeat="(key,value) in tableData.data">
<td>{{key}}</td>
<td><div class="bg">{{value.NumberOfBills}}</div></td>
<td><div class="bg">{{value.CummalativeBillAmount}}</div></td>
<td><div class="bg">{{value.ResponseProgress}}</div></td>
</tr>
</table>
Here is working fiddle
I am new to angularjs and I am trying to write a directive with nested elements.
<mydir-table>
<mydir-columns>
<mydir-column>
<title>Employee Name</title>
<data-field-name>ename</data-field-name>
<mydir-table>
<mydir-columns>
<mydir-column>
I have a JSON something similar to this:
{
rows: [
{
name: "Emp1"
},
{
name: "Emp2"
}
]
}
and expected output is:
<table>
<th>
Employee Name
</th>
<tr>
<td>
Emp 1
</td>
</tr>
<tr>
<td>
Emp 2
</td>
</tr>
</table>
Can anyone please provide some thoughts on how this can be implemented?
I would like to show Events with Subevents I got from an API as JSON
[
{
"class":"de.ff.prg.EventItem",
"id":27667,
"additional_info":null,
"comments":null,
"event":{"class":"Event","id":27657},
"length":0,
"runningorder":0,
"screening":{"class":"Screening","id":27529},
"title_eng":"'71",
"title_ger":"'71",
"venue":{"class":"Venue","id":1}},
{"class":"de.ff.prg.EventItem",
"id":27676,
"additional_info":null,
"comments":null,
"event":{"class":"Event","id":27657},
"length":5,
"runningorder":0,
"screening":null,
"title_eng":"NEW",
"title_ger":"NEW",
"venue":{"class":"Venue","id":8}
}
]
In order to display the fields of the items in rows and not in columns, I have nested two tables with ng-repeat so that I get a table of tables.
<!--Items-->
<table>
<thead>
<td colspan="6" style="background-color: #b9da73">
<button class="btnAdd" ng-click="addAndEditEventItem()">Add Item</button>
</td>
</thead>
<tbody>
<tr ng-repeat="item in eventItems">
<h1>{{eventItems.length}}</h1>
<th>
<table>
<thead>
<td colspan="2" style="background-color: #c0da86">{{item.runningorder}}</td>
<td colspan="4" style="background-color: #c0da86">
<button class="btnAdd" ng-click="deleteEventItem(item.id)">Delete Item</button>
</td>
</thead>
<tbody>
{{item}}
<tr ng-repeat="(key,value) in item">
<th colspan="2" style="background-color: #ceeca1">{{key}}</th>
<th colspan="4" style="font-weight: normal;">{{value}} </th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
Up until now this was no problem, but somewhere along the way I have lost the possibility to display the body of the first sub-table (all other rows render fine). I have inserted {{item}} before the body tag and it shows the missing data, so it's there all right.
Any ideas? Or do you need to see the other code to tell? I have no clue...
Here is a Fiddle
Interesting case.
Empirically, I found that this is because of
"length":0
Just looked into angular source code and found that it transforms object's properties in repeat to an array, and then takes it's length property to iterate through it.
...ngRepeatDirective...
if (isArrayLike(collection)) {
collectionKeys = collection;
trackByIdFn = trackByIdExpFn || trackByIdArrayFn;
} else {
trackByIdFn = trackByIdExpFn || trackByIdObjFn;
// if object, extract keys, sort them and use to determine order of iteration over obj props
collectionKeys = [];
for (key in collection) {
if (collection.hasOwnProperty(key) && key.charAt(0) != '$') {
collectionKeys.push(key);
}
}
collectionKeys.sort();
}
arrayLength = collectionKeys.length; <<<--- HERE
// locate existing items
length = nextBlockOrder.length = collectionKeys.length; <<<--- AND HERE
So nothing really happens.
Seems like a bug actually. I've posted an issue.
Just try then iterating through your array and change name of this property. Like:
for(var i = 0; i < $scope.eventItems.length; i++){
$scope.eventItems[i].itemLength = $scope.eventItems[i].length;
delete $scope.eventItems[i].length;
}