Nothing displayed in *ngFor angular - html

i have this json file :
{
"id": 1276,
"etabName": "YAssineDev",
"etabType": "OUR_SCHOOL",
"users": [
{
"id": 12,
"username": "YassineDev",
"firstName": "yassine",
"lastName": "messaoud",
"active": true,
"payant": false,
"creatdateTime": "2021-06-08",
"roles": [
{
"id": 2,
"roleName": "ADMIN_USER",
"description": "admin user"
}
]
}
]
},
i want to display the username of the users tab in the html,
i have tried with *ngFor:
<tbody>
<tr *ngFor="let t of tabs.users">
<td>{{ t.username }}</td>
</tr>
</tbody>
getMethod
dataEtabUser() {
this.cr.getdataEtab().subscribe(data=> {
this.tabs = data
})
}
ngOnInit
this.dataEtabUser()
but nothing displayed

Assuming the dataEtabUser() works correctly
<div *ngFor="let t of tabs">
<tbody *ngFor="let user of t.users">
<tr *ngFor="let data of user">
<td>{{ data.username }}</td>
</tr>
</tbody>
</div>

Related

Iterate over object and display it in table Angular (array in array)

I have an api that returns this json.
Student = [
{"name": "Maha",
"age": "18",
"sibling": []
},
{"name": "Jensen",
"age": "19",
"sibling": [{"age": "22", "name": "JensenBrotherName"}]
},
{"name": "Matteo ",
"age": "19",
"sibling": [{"age": "27", "name": "MatteoBrotherName"}]
},
{"name": "Sumayya",
"age": "18",
"sibling": [{"age": "22", "name": "SumayyaBrotherName"}, {"age": "24", "name": "SumayyaBrotherName2"}]
},
{"name": "Caris",
"age": "18",
"sibling": [{"age": "22", "name": "CarisBrotherName"}, {"age": "24", "name": "CarisBrotherName2"}]
}
]
I am trying to display this data in a grid like this image
For the sibling column, I am trying to only display the names without age.
Things that I tried -
Student.sibling showed [object] [object]
And,
nested ngFor like
<div *ngFor ="let item of Student">
<div *ngFor ="let name of item.sibling">
{{name.name}}
</div>
</div>
and it displays all the siblings names for every student like
How can I do this in Angular?
The data provided won't produce the output you've specified.
I'm not sure what you mean by an "Angular" way of iterating through the data, but here's one example:
<table>
<caption>
Students
</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sibling</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>
<ng-container *ngFor="let sibling of student.sibling; let last = last">
{{ sibling.name }} ({{ sibling.age }})<ng-container *ngIf="!last"
>,
</ng-container>
</ng-container>
</td>
</tr>
</tbody>
</table>
Which produces the output visible in this Stackblitz

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor Angular 9

I tried so many solutions none of them are not working. please help me to solve this. I need to loop through JSON objects. below is what I tried and my JSON code. I can print the Section name in tr tag but I cannot print the School object Name in the tr tag.
service.ts
getSections(): Observable<Section> {
return this.http
.get<Section>(this.apiUrl + 'sections/all')
.pipe(
retry(2),
catchError(this.handleError),
);
}
Component.ts
getSections() {
this.service.getSections().subscribe(response => {
Object.assign(this.sectionData, response);
console.log(response);
});
}
component.html
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Section Name</th>
<th>School Name</th>
</tr>
</thead>
<tr *ngFor="let pro of sectionData ;let i=index">
<td [hidden]="true">{{pro.sectionID}}</td>
<td>{{i + 1}}</td>
<td>{{pro.Name}}</td>
<ng-container *ngFor="let sch of pro.School">
<td>{{sch.Name}}</td>
</ng-container>
</tr>
</table>
My JSON
[{
"$id": "1",
"SectionID": 1,
"SchoolID": 6,
"Name": "Grade 1",
"Active": true,
"Tstamp": null,
"Classes": [],
"School": {
"$id": "2",
"SchoolID": 6,
"Name": "Yalpanam",
"AlternativeName": "سصر ءصيص",
"TelephoneNumber": "16556489",
"URL": "",
"EmailID": "",
"Longitude": null,
"Latitude": null,
"Active": true,
"Tstamp": null,
"ClassSections": [],
"NonStaffs": [],
"Principals": [],
"Students": []
}
}]
The error which I get is
Error Msg
In you JSON, School is not an array - it is an object. So you can't iterate over it. To fix that, in your markup change:
<ng-container *ngFor="let sch of pro.School">
<td>{{sch.Name}}</td>
</ng-container>
to simply
<td>{{pro.School?.Name}}</td>

Looping with in an array to get required data in angular

I have an JSON as mentioned below:
[{
"_id": 1,
"Name": "x",
"Email": "z#epsilon.com ",
"Designation": "Manager",
"Project": "x",
"Skills": [{
"Technology": "Big Data- Hadoop, Hive, HDFS",
"Level": "Theoretical",
"TotalExperience": ""
},
{
"Technology": "Oracle PL/SQL",
"Level": "Intermediate",
"TotalExperience": ""
},
{
"Technology": "Informatica PowerExchange 8.x",
"Level": "Intermediate",
"TotalExperience": ""
},
{
"Technology": "IBM Datastage 7.5",
"Level": "Beginer",
"TotalExperience": ""
},
{
"Technology": "MS Word",
"Level": "Expert",
"TotalExperience": ""
},
{
"Technology": "USnit testing",
"Level": "Expert",
"TotalExperience": ""
}
]
}];
I want to show it as a tabular format in angular as Name, Project, Designation, Skills (Under skills: theoretical, expert, intermediate) and then the data.
I am able to achieve all but only skills which is an inner table am not able loop though correctly
Here, try this:
Template:
<table border="1">
<thead>
<td>Name</td>
<td>Project</td>
<td>Designation</td>
<td>Skills</td>
</thead>
<tbody>
<tr *ngFor="let datum of data">
<td>{{ datum.Name }}</td>
<td>{{ datum.Project }}</td>
<td>{{ datum.Designation }}</td>
<table border="1">
<thead>
<td>Theoritical</td>
<td>Beginer</td>
<td>Intermediate</td>
<td>Expert</td>
</thead>
<tbody>
<tr>
<td>{{ filterSkillBy(datum.Skills, 'Theoretical') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Beginer') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Intermediate') }}</td>
<td>{{ filterSkillBy(datum.Skills, 'Expert') }}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
data = [...];
filterSkillBy(skills: any[], by) {
return skills.filter(skill => skill.Level === by).map(skill => skill.Technology).toString();
}
}
Here's a Sample StackBlitz for your ref.

Create a table from REST object by setting data in columnar manner

I have a REST service, which returns this object:
[
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
]
Now, using this GET service, I want the following table to be built in angular and show it in UI.
100 1 4 5
-------------------
2452 2457 2460 3458
2458 2459
i.e. the unique ids should create the header and the list of values associates to each header value will be appended to respective column.
I have tried something with ng-repeat like this:
<table border="1">
<tr>
<th ng-repeat="column in cols">{{column.id}}</th>
</tr>
<tr>
<td ng-repeat="column in cols">
<md-list>
<md-list-item class="md-2-line" ng-repeat="val in column.values">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
??
</div>
</md-list-item>
</md-list>
</td>
</tr>
But still wondering how to do the same? Please help.
Try use groupBy filter.
var app = angular.module('anApp', ['angular.filter']);
app.controller('aCtrl', function($scope) {
$scope.data = [
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<table border="1">
<tr>
<th ng-repeat="col in data | groupBy: 'id'">{{col[0].id}}</th>
</tr>
<tbody>
<tr>
<td ng-repeat="col in data | groupBy: 'id'">
<table>
<tr ng-repeat="c in col">
<td> {{c.value}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>

ng-repeat with a big JSON

I have an AngularJS variable var vm = this; which contains a big JSON format data:
vm.data = {
"sites": [{
"siteName": "A",
"countries": [{
"country": "DE",
"servers": [{
"serverType": "master",
"URL": ""
},{
"serverType": "slave",
"URL": ""
}]
}]
},{
"siteName": "B",
"countries": [{
"country": "IT",
"servers": [{
"serverType": "master",
"URL": ""
},{
"serverType": "slave",
"URL": ""
}]
},{
"country": "NL",
"servers": [{
"serverType": "master",
"URL": ""
},{
"serverType": "slave",
"URL": ""
}]
}]
}]
};
I want to put this data in a table
I use "c" because of the the "controller (which is the name of my controller) as c".
<tr ng-repeat="site in c.data.sites">
<td>{{ site.siteName }}</td>
<td>{{ site.countries }}</td>
<td>{{ site.countries.name }}</td>
</tr>
The first td works perfectly, the second displays everything that is contained in the countries set, and the last doesn’t display anything.
I tried to declare vm.data.sites.countries, but it failed.
Can you shed some light on this?
Your countries is an array, so if you want to list every country you can access every name of the country objects (your name attribute for a country object is country) with a new loop (ng-repeat).
<tr ng-repeat="site in c.data.sites">
<td>{{ site.siteName }}</td>
<td>{{ site.countries }}</td>
<td>
<span ng-repeat="country in site.countries>
{{country.country}}
<span ng-if="!$last">, </span>
</span>
</td>
</tr>
Well you're not really referencing your keys appropriately.
<tr ng-repeat="site in c.data.sites">
<td>{{ site.siteName }}</td>
<td>
<span ng-repeat="country in site.countries">
{{ country.country }}
<span ng-hide="$last">, </span>
</span>
</td>
</tr>