This is my array which have property message which have another array.
chat = [{id:1, toUser:10, fromUser:11, seen:null, name:'Filip', messages:[{message:'Hello'},{message:'Hello again'}]}];
This is my HTML
<div *ngFor="let c of chat">
<h1>{{c.name}}</h1> //this works fine
<p>{{c.messages.message}}</p> //There I cant get anything. If I set c.messages[0].message I only get first result
</div>
Use a second nested ngFor. Something like:
<div *ngFor="let c of chat">
<h1>{{c.name}}</h1>
<p *ngFor="let item of c.messages">{{item.message}}</p>
</div>
Related
I have two arrays of strings. One of those will be a dynamic list of checkboxes. I want to check if the item exists in the other array. How can I do it dynamically using angular 6?
This is the current situation of the list of checkboxes...
The checked need to be dynamic...
<div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="false" >p</mat-checkbox>
</div>
You could do something like this if you want to check the items which are also existing inside the otherArray. This is assuming that these arrays are string arrays as you mentioned.
// In the template
<div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="isInOtherArray(p)" >p</mat-checkbox>
</div>
// In the component method
public isInOtherArray(person) {
return this.otherArray.indexOf(person) > -1;
}
Or you could directly use it on your template
<div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="otherArray.indexOf(p) > -1" >p</mat-checkbox>
</div>
i have an angular js array binded to the $scope object. The array is an associative array. Simple array of arrays, and i dont know how to traverse through it in ng-repeat. This is my array, and I want to get the path of each file which on 0th index in sub arrays. I want to get
files/file/img1.bmp,
files/file1/img1.jpg,
files/file2/img1.jpg
$scope.im = [
["files/file/img1.bmp", "files/file/img2.jpg", "files/file/img3.jpg", "files/file/img4.jpg", "files/file/img5.jpg", "files/file/img6.jpg", "files/file/img7.jpg", "files/file/img8.jpg", "files/file/img9.jpg"],
["files/file1/img1.jpg", "files/file1/img2.jpg", "files/file1/img3.jpg", "files/file1/img4.jpg", "files/file1/img5.jpg", "files/file1/img6.jpg", "files/file1/img7.jpg", "files/file1/img8.jpg", "files/file1/img9.jpg"],
["files/file2/img1.jpg", "files/file2/img2.jpg", "files/file2/img3.jpg", "files/file2/img4.jpg", "files/file2/img5.jpg", "files/file2/img6.jpg", "files/file2/img7.jpg", "files/file2/img8.jpg", "files/file2/img9.jpg"]
];
Not really an associative array cause you got no key for your values.
However, given your code if you want to iterate over your array just use :
<div ng-repeat="file in im">
<!-- Now file is your list (e.g. ["files/file/img1.bmp", "files/file/img2.jpg"] -->
<p>{{file[0]}}</p>
<p>{{file[1]}}</p>
<!-- and so on -->
</div>
And you will get the first element of each one of your items in the array.
Displaying image out of those nested array could be simple, here is an example:
<div ng-repeat="childArray in im">
<div ng-repeat="photos in childArray">
<img src="{{items}}" alt="something" />
</div>
</div>
Try this. As #Priyesh Kumar commented so you should use nested ng-repeat
<div ng-repeat="key in im">
<div ng-repeat="value in key">
{{value}}
</div>
</div>
You can iterate over the array, im, normally as described in the docs and access the first element of your inner array
<ul>
<li ng-repeat="list in im">
<!--- list now represents the inner array --->
{{ list[0] }} <!-- write the first path -->
</li>
</ul>
If you want it to work for each index of the sub arrays:
<div ng-repeat="(idx, value) in im[0]">
<br>
<div ng-repeat="file in im">
<p>{{file[idx]}}</p>
</div>
</div>
This would print :
files/file/img1.bmp
files/file1/img1.jpg
files/file2/img1.jpg
files/file/img2.jpg
files/file1/img2.jpg
files/file2/img2.jpg
...
I wanna show json data in the client . If server sends an array, it can be handled by *ngfor="item of items", but server can send one row json that can not be implemented with *ngfor, because with *ngfor we can just have an array.
How can implement conditional *ngfor:
<div *ngFor="let item of (Array.isArray(items) ? items : [items])
I want to check items variable , if it is array type, items should be used as an array , otherwise one row jason
Thanks in advance
I would suggest you to create two divs with *ngIf statement, and use ngFor in case server returns an array.
<div *ngIf="Array.isArray(items)" *ngFor="let item of items">{{item}}</div>
<div *ngIf="!Array.isArray(items)">{{items | json}}</div>
It gives better understanding from first sight what is going on in code. Hope it will help
Thanks for your help.
As you recommend I tried following code and it works
<div [ngSwitch]="items.length > 0">
<div *ngSwitchCase="true">
<div *ngFor="let item of items">
<md-checkbox
[checked]= "item[valueKey] == trueValue"
[disabled]="disabled"
align="start"
(change)="onChange($event,item,valueKey)"
(onInputFocus)="onFocus()">
{{item[labelKey]}}
</md-checkbox>
</div>
<md-checkbox
[checked]= "items[valueKey] == trueValue"
[disabled]="disabled"
align="start"
(change)="onChange($event,items,valueKey)"
(onInputFocus)="onFocus()">
{{items[labelKey]}}
</md-checkbox>
</div>
<div (ng-repeat='item in items') >
{{item.name}} //works
{{item["name"]}} // works
</div>
how do i repeat item[property] dynamically without using ".name" or ['name']?
To dynamically go through properties, you're going to need to call Object.keys(item) and then iterate through them. It's best to prune your data from within your controller, to minimize the finagling you'll need to do within your HTML.
If you do want to try to do this within your HTML-Angular structures, you could define:
$scope.returnAllKeyValues = function(obj){
var x = Object.keys(obj),
arr = [];
for(var i = 0; i<x.length; i++){
arr.push(obj[x[i]]);
}
return arr;
}
What this function does is it takes in your JSON object, then parses through it and collects all the values for every key within it.
Then, within your HTML, you can write something like this:
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items">
<span ng-init="keyValues = returnAllKeyValues(item)">
<span ng-repeat="keyValue in keyValues">{{key}} </span>
</span>
</li>
</ul>
</div>
Here you see, within your original ngRepeat, we initialized the array keyValues with all the values from item's keys via the function defined above. Then, ng-repeat through that, and you have everything printed without knowing what they are.
Here is a Fiddle with it working:
http://jsfiddle.net/RkykR/2771/
This was what i was looking for....Thanks
https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat
I have a array like this:
$scope.sortable = [["inProgressCounter","31"],["approvedCounter","3"],["pendingCounter","35"],["rejectedCounter","0"]]
I need to show them with ng-repeat my code is:
<ul>
<li ng-repeat="info in sortable">{{info[0]}}{{info[1]}}</li>
</ul>
but it gives me nothing.
so I also tried print the data out in html like this:
{{sortable}}
<ul>
<li ng-repeat="info in sortable">{{info[0]}}{{info[1]}}</li>
</ul>
it works,and shows me the data.
Here is a plunker of this working. This was all using the code you provided.
There must be something wrong with your controller, or you arent even assigning a controller to anything.
code
http://plnkr.co/edit/4pEsP6mr0tA6Toe9coTG?p=preview