I consume a external JSON API with this array.
temperature_mean: [ 16.94,19.9,19.13,15.22,15.52,15.62,12.47 ],
I want to split this array into seperated objects with an *ngFor loop:
<div class="card">
<h2>Temperature</h2>
<div *ngFor="let temp of cityTemperature">
{{cityTemperature}}
</div>
</div>
That's what I got back:
But I want on each line only one object. How can I do that and seperate this loop?
You need to change your html to:
<div class="card">
<h2>Temperature</h2>
<div *ngFor="let temp of cityTemperature">
{{ temp }}
</div>
</div>
Related
In an Angular project, I want to loop through filterLifePolicies array because I want to pass via URI the LobDsc property.
The problem is that I also want to output as a number the length of the array but because I loop through each element if the array contains e.g.
3 objects, 3 cards are displayed...I only want one card with the number 3 (array length).
HTML:
<div class="card" *ngFor="let policy of filterLifePolicies">
<a [routerLink]= "['/contracts', policy.LobDsc]"
routerLinkActive="active" class="noLinksDecoration">
<div class="card-body text-center">
<img src="../../assets/images/Component62_1.svg">
<p class="policyTitle">Ζωή & Υγεία</p>
<p class="counter">{{countLife}}</p>
</div>
</a>
</div>
Part of Typescript:
getCustomerPolicies () {
this.http.get<any>('http://localhost:8080/o/mye/pol').subscribe({
next: res => {
this.filterLifePolicies = res.Life.Policies;
console.debug(this.filterLifePolicies);
this.countLife = this.filterLifePolicies.length;
You can do the following, considering countLife variable is assigned the required value.
<div class="card">
<ng-container *ngFor="let policy of filterLifePolicies; index as i">
<a *ngIf="i < 1" [routerLink]="['/contracts', policy.LobDsc]" routerLinkActive="active" class="noLinksDecoration">
<div class="card-body text-center">
<img src="../../assets/images/Component62_1.svg">
<p class="policyTitle">Ζωή & Υγεία</p>
</div>
</a>
</ng-container>
<p class="counter">{{countLife}}</p>
</div>
In the above code snippet, ng-container is being used to iterate through filterLifePolicies in order to access LobDsc value. Since the iteration should not create duplicate HTML div elements with CSS class card-body, an additional check via ngIf is being used to check the index value, such that it should be always lesser than 1.
Although if the LobDsc value is the same for all the values of filterLifePolicies, the recommended approach would be to fetch its value via the dot notation and store it in a variable that can be later binded directly to your template during runtime.
<div *ngFor="let item of category">
{{item.categories.categories.id}}
</div>
That's the data fetched from api. By nested array I can't display this data
How about this
<div *ngFor="let item of category">
<div *ngFor="let subItem of item.categories">
{{subItem.categories.id}}
</div>
</div>
Explanation:
As there are nested array, you have to loop over again for inner array
I want to create a list of items with subitems. The items and the subitems are listed in arrays like this:
items=[firstItem,secondItem,thirdItem,...]
and
subitems=[{"name":"firstSubitem1","name":"secondSubitem1",...},{"name":"firstSubItem2","name":"secondSubItem2"},...]
So I've set up this html code:
<body>
<div ng-app="" ng-init="items=[firstItem,secondItem,thirdItem,...],subitems=[{"name":"firstSubitem1","name":"secondSubitem1",...},{"name":"firstSubItem2","name":"secondSubItem2"},...]">
<div ng-repeat="itemNames in items" id="item{{$index}}">{{itemNames}}</div>
</div>
</body>
But that only outputs the list if items, and i want to make a list of items (divs) that have subitems (paragraphs). So the output that I want to create is this:
<body>
<div (...) id="item0">
firstItem
<p>firstSubitem1</p>
<p>secondSubitem1</p>
<p>...</p>
</div>
<div (...) id="item1">
secondItem
<p>firstSubitem2</p>
<p>...</p>
</div>
<div (...) id="item2">
...
</div>
</body>
So how can I make it so that will be the output?
You need to restructure your data as following:
items = [{
title: firstItem,
subitems: [firstSubitem1, secondSubitem1, ...]
}, {
title: secondItem,
subitems: [firstSubitem2, secondSubitem2, ...]
}....]
And html to be as follows:
<div ng-repeat="item in items" id="item.title{{$index}}">{{item.title}}
<p ng-repeat="subitem in item.subitems">{{subitem}}</p>
</div>
If you insist on your data structure, use $index from the outer loop:
<body>
<div ng-app="" ng-init="items=[firstItem,secondItem,thirdItem,...],subitems=[{firstSubitem1,secondSubitem1,...},{firstSubItem2,secondSubItem2},...]">
<div ng-repeat="itemNames in items" id="item{{$index}}">
{{itemNames}}
<p data-ng-repeat="(key, value) in subitems[$index]"> {{ value }}</p>
</div>
</div>
i want to iterate through array elements and print them one by one.
currently i have this HTML code.
<div data-ng-repeat="i in range">
<div ng-repeat="rhit in hits[i]">
<p > {{ rhit }}</p>
</div>
</div>
here
"range" is an array with values till 100([0,1,2,....,100])
"hits" is an array containing more than one element
if i try separately printing like this, it works
<p > {{ hit[0] }}</p>
<p > {{ hit[1] }}</p>
<p > {{ hit[2] }}</p>
i also tried this code but it doesn't print anything.
<div ng-repeat="rhit in hits">
<p > {{ rhit }}</p>
</div>
this is my actual query result
"aggregations": { "by_id": { "doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0, "buckets": [ {
{"key":"60","doc_count":21,
"tops":{
"hits":{
"total":21,"max_score":2.2237754,
"hits":[{"_index":"automatch_testing","_type":"temp_135","_id":"AVU7i0nnXK6g_oqHu-az","_score":2.2237754,"_source":{"t_pacs_id":"34","t_id":"60","matching":"MO"}},
{"_index":"automatch_testing","_type":"temp_143","_id":"AVU7iOSeXK6g_oqHu-XY","_score":2.2237754,"_source":{"t_pacs_id":"30","t_id":"60","matching":"MO","t_match":"matched"}},
{"_index":"automatch_testing","_type":"temp_135","_id":"AVU7i0nlXK6g_oqHu-ay","_score":2.2237754,"_source":{"t_pacs_id":"28","t_id":"60","matching":"MO","UICriteria":"135","t_match":"matched"}}]}}}
here i want to print the field "t_pacs_id" of each document in hits...
is there any way the above code can be run?? please suggest.
many thanks.
here is the plunker
If you are interested to get the hits collection ith place then you could directly do hits[i] instead of having another ng-repeat
<div data-ng-repeat="i in range">
<p> {{ hits[i] }}</p>
</div>
You say that separately printing something like this works:
<p > {{ hit[0] }}</p>
In that code, you are accessing an array named "hit", but in your code that does not work, you are using ng-repeat to iterate over an array named "hits". What do you get when you try:
<div ng-repeat="rhit in hit[i]">
I'm quite new to Angularjs, and I'm doing an $http.get from a json. I've gotten the response and it works. The only problem is that I have to hard-code the handlebars rather than do a ng-repeat
{{country.results[0]["breakfast/_text"][1] }}
{{country.results[0]["breakfast/_text"][2] }}
{{country.results[0]["breakfast/_text"][3] }}
{{country.results[1]["breakfast/_text"][1] }}
{{country.results[1]["breakfast/_text"][2] }}
{country.results[1]["breakfast/_text"][3] }}
{{country.results[1]["breakfast/_text"][4] }}
{{country.results[2]["breakfast/_text"][1] }}
{country.results[2]["breakfast/_text"][2] }}
{{country.results[2]["breakfast/_text"][3] }}
{{country.results[3]["breakfast/_text"][1] }}
{{country.results[3]["breakfast/_text"][2] }}
How do I do an ng-repeat for a 2-d json array like this?
You should use two nested ngRepeat directives. This should render it:
<div ng-repeat="result in country.results">
<div ng-repeat="(key, value) in result['breakfast/_text']">
{{value}}
</div>
</div>
I have created a plunker and use ng-repeat for 2D data like this.
$scope.data = [
{'text':[1,2,3]},
{'text':[3,4,5]},
{'text':[5,6,7]},
];
and
<div ng-repeat="result in data">
<div ng-repeat="value in result">
<div ng-repeat="values in value">
{{values}}
</div>
</div>
</div>
This might help you .