The JSON I'm passing into my view has objects and arrays inside of it. Example:
{ name: "test", projects: [ { name: "project1", tasks: "task1" } ] }
Using ng-repeat, I can say (key, value) in items and am given what you'd expect, each key and the stringified version of the object or array.
Is there a 'best practice' for iterating over the objects and arrays inside an ng-repeat?
Just following up with an answer, as I was able to figure this out. It was simpler than I realized. Just used another ng-repeat for items that were arrays.
<div class="container" ng-repeat="item in items">
<table class="table table-striped table-bordered table-condensed">
<tr>
<th class="span3">name</th>
<td>{{ item.name }}</td>
</tr>
<tr>
<th class="span3">accounts</th>
<td>
<ul ng-repeat="account in item.accounts">
<li>username: {{ account.username }}</li>
<li>password: {{ account.password }}</li>
</ul>
</td>
</tr>
</table>
Related
I am trying to iterate array using ng-repeat, but not getting proper output.
<table>
<tr>
<th>Index</th>
<th>Items</th>
</tr>
<tr ng-repeat="li in list">
<td ng-repeat="(key,value) in li">{{key}}</td>
<td ng-repeat="(key,value) in li">{{value}}</td>
</tr>
</table>
$scope.list = [
{"foo": ["item1", "item2"]},
{"bar": ["item1", "item2"]}
];
Expected output:
Index Items
foo item1
foo item2
bar item1
bar item2
Actual output:
Index Items
foo ["item1","item2"]
bar ["item1","item2"]
Anyone help me out to print the exact key,value of list.
You could create an custom filter or function that will simplify the result. That will also get rid of nested ng-repeat's
$scope.simplyfiedList = [];
$scope.list.forEach(function(item){
Object.keys(item).map(function(key){
item[key].map(function(i){
$scope.simplyfiedList.push({key: key, value: i});
})
})
});
Html
<table class="table table-responsive">
<tr>
<th>Index</th>
<th>Items</th>
</tr>
<tr ng-repeat="item in simplyfiedList">
<td>{{item.key}}</td>
<td>{{item.value}}</td>
</tr>
</table>
Demo Plunker
Given the structure of your data you'd probably have to do something like this.
<div ng-repeat="li in list">
<div ng-repeat="(key, itemArray) in li">
<tr ng-repeat="item in itemArray">
<td>{{key}}</td>
<td>{{item}}</td>
</tr>
</div>
</div>
I didn't test it and also I wouldnt recommend it. I'd rather write a function that flattens the data.
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 need to display the array quality which is located inside an array of objects. I have tried calling it in ngFor using the code below. Is there something wrong with my usage of ngFor?
import { Component} from '#angular/core';
#Component({
selector: 'my-app',
template: `<table>
<thead>
<tr>
<th>Name</th>
<th>Quality1</th>
<th>Quality2</th>
</tr>
</thead>
<tbody>
<tr *ngFor"let item of people">
<td>{{item.Name}}</td>
<td *ngFor"let item of people.quality">item.quality1</td>
<td *ngFor"let item of people.quality">item.quality2/td>
</tr>
</tbody>
</table>
})
export class AppComponent{
people: any = [{Name:"John", quality:[{quality1: "nice", quality2: "humble"}]}, {Name:"Dave", quality:[{quality1: "kind", quality2: "caring"}]} ];
}
As of now only the names are appearing in the table but I would also like the quality to appear.
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
If I understand you well you could also bind like that:
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
<td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
</tr>
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
i am trying to filter my table data based on the input text, but some how it's not working. Kindly help please.
<div class="panel panel-default">
<div class="panel-heading">search
<input type="text" ng-model="search_text">
Searching for :: {{search_text}}
</div>
<Table>
<table class="table table-hover table-bordered">
<tr>
<td>Item ID</td>
<td>Quantity</td>
</tr>
<tr ng-repeat="item in items | filter:search_text">
<td>{{item.item[0] }}</td>
<td>{{item.item[1] }}</td>
</tr>
</table>
</div>
Please check for the version your angularjs you are using or any errors in console.
Your code seems to work and is correct indeed.
//array of items containing itemID and its quantity
$scope.items = [{
item:['chair',45]
},
{
item:['bed',23]
},
{
item:['laptop',8]
}]
Here's the working plunkr
The table data is indeed filtering with respect to value you enter in textbox
Since Angular 1.1.3 you can use:
<tr ng-repeat="item in items | filter:{item[0]: search_text}">
This will compare it to the object property item[0] in your object.
If you want the exact match, you can set the filtering to true by adding:
<tr ng-repeat="item in items | filter:{item[0]: search_text}:true">