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
...
Related
I am trying to iterate over an object that's in an array of an array, however, I'm not able to display the data in the front-end.
I tried this method:
<div *ngFor="let item of events of event | keyvalue">
{{item.key}}:{{item.value}}
</div>
and this one:
<div *ngFor="let item of events of event | json">
Test: {{item}}
</div>
The structure of the JSON data is given in this format.
[
[
{
"age": "age3",
"gender": "gender3"
},
{
"age": "age3",
"gender": "gender3"
}
]
]
You'll have to iterate through each internal array as well, so you'll need a nested *ngFor. Make sure to reference the correct item array in your nested *ngFor.
<div *ngFor = "let item of events">
<div *ngFor = "let x of item">
{{x.age}}:{{x.gender}}
</div>
</div>
It looks likes a nested array, try using multiple ngFor:
<div *ngFor="let event of events">
<div *ngFor="let item of event">
Test: {{item | json}}
</div>
</div>
Otherwise you could try using Array.prototype.flat to flatten the nested array:
this.flattened = this.events.flat();
// ...
<div *ngFor="let item of flattened">
Test: {{item | json}}
</div>
<ng-container> is fine when you want structural logic without polluting the DOM with useless elements.
<ng-container *ngFor="let subArray of array"> <!-- This does not appear in the DOM -->
<div *ngFor="let item of subArray"> <!-- This appears in the DOM -->
{{item.key}}:{{item.value}}
</div>
</ng-container>
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>
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 am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.
This is my code which I am trying:
<div ng-repeat = "x in myWelcome.definition">
{{x.attributes[0].children[0].node_id}}
<hr>
</div>
I have tried this and it is working:
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
<div ng-if ="a.attributes">
a: {{a.attributes[0].rm_attribute_name}}
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index.
And my json file is here in the plunker:
Plunker link of json and code
So how can I iterate here using ng-repeat here this code:
{{myWelcome.definition.attributes[0]}}
is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.
ng-repeat can be used in the following way:
<div ng-repeat = "(key,value) in myWelcome.definition.attributes">
Key:{{key}} and value :{{value}}
<hr>
</div>
OR you can Try this:
<div ng-repeat = "x in myWelcome.definition.attributes">
<div ng-repeat="a in x.children">
a:{{a.node_id}}
</div>
</div>
Edited Plunker
I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
{{$index}}
<div ng-if ="a.attributes">
<div ng-repeat="b in a.attributes">
<hr>
{{b.children.length}}
<div ng-if="b.children.length > 1">
If the array is more than 1 please do the magic here
</div>
</div>
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.
I'd like to reference the next element is this possible within the ng-repeat directive ?
<li ng-repeat="row in rows">
if {{row.someValue}} === {{row+1.someValue}}
//Is it poss to check if the following row so I can do some kind of conditional comparison ?
</li>
Thanks
W
As #PSL said - you just need to get the next index in the array you are looping:
<li ng-repeat="row in rows">
{{rows[$index+1]}} // this will give you the next row's data
<div ng-switch on="rows[$index+1].value">
<div ng-switch-when="true">
<!-- shows when the value of the next row is true-->
</div>
<div ng-switch-when="false">
<!-- shows when the value of the next row is false-->
</div>
</div>
</li>