ng for multiple array angular - json

hello every one i have this api
[
[{
"id": 1,
"qte": 12,
"date_creation": "2020-08-17T00:00:00+02:00",
"date_update": "2020-08-17T00:00:00+02:00",
"depot": {
"id": 1,
"nom_depot": "bb"
},
"produit": {
"id": 1,
"matricule": "ff",
"prix": 12,
"libelle": "dd"
}
}],
[]
]
but when i want to display just the Qte ,the libelle of produit and nom_depot of depot like this
<tr *ngFor="let
data of
depot ;let
i= index"
(click)=addToAnotherTable(i)>
<td>
<span>{{data.depot.nom_depot}}</span>
</td>
<td>
<span>{{data.produit.libelle}}</span>
</td>
<td>
<span>{{data.qte}}</span>
</td>
</tr>
it doesn t work i don t know why pls help

You just need to use index, because as Michalis said, you have an array of arrays.
datas = [
[{
"id": 1,
"qte": 12,
"date_creation": "2020-08-17T00:00:00+02:00",
"date_update": "2020-08-17T00:00:00+02:00",
"depot": {
"id": 1,
"nom_depot": "bb"
},
"produit": {
"id": 1,
"matricule": "ff",
"prix": 12,
"libelle": "dd"
}
}],
[]
];
<table>
<tr *ngFor="let data of datas;let i= index">
<td>
<span>{{data[i]?.depot.nom_depot}}</span>
</td>
<td>
<span>{{data[i]?.produit.libelle}}</span>
</td>
<td>
<span>{{data[i]?.qte}}</span>
</td>
</tr>
</table>

Related

Nothing displayed in *ngFor angular

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>

access value in array from Json response angular 4

i wanna display a field in array at table .. how can i access SubjectCode in my Json Response using angular 4 ? .. My code give me error [Error trying to diff '[object Object]'. Only arrays and iterables are allowed]
Json Response :
{
"$id": "1",
"Council_ID": 88,
"place": "bla bla",
"number": "45",
"type": 1,
"date": "2017-11-08T00:00:00",
"time": "04:51",
"user_Id": 15,
"subjects": [
{
"$id": "2",
"subjectCode": "45",
"type": 1,
"faculty": "medicine",
"branch": "اسكندرية",
"gender": true
}
],
"absence": []
}
meeting.component.html:
<table class="table table-hover table-condensed text-center">
<tbody>
<tr *ngFor="let subject of subjectsWithID">
<td > {{subject.subjects.subjectCode}} </td>
</tr>
</tbody>
</table>
meeting.component.ts:
this.dataStorageService.getCouncilId(this.meetingID).subscribe(response => {
this.subjectsWithID = response.json();
console.log(this.subjectsWithID, 'all Json Resopnse Here')
});
You should use ngFor over subjects, code should be,
<tr *ngFor="let subject of subjectsWithID.subjects">
<td > {{subject.subjectCode}} </td>
</tr>
Your subjects property is an array. If you want to display it, then you should do
{{subject.subjects[0].subjectCode}}

How to fill a table with an object including an array of object in Angular2

I'm currently programming in Angular2/Typescript and I'm blocked with a table. I want to fill a table with the information I receive from my service which looks like that :
[
{
"id": 1,
"serviceWindow": "24/7",
"status": "Active",
"customer": "BGL",
"serviceProvidedType": "Call Desk",
"drpContactList": [
{
"id": null,
"name": "Jean Bon",
"timeStart": "08:00",
"timeEnd": "16:00",
"value": "jean.bon#ctg.com",
"mediumType": "Email"
},
{
"id": null,
"name": "Charles Degaule",
"timeStart": "16:00",
"timeEnd": "19:00",
"value": "+352 258 484 494",
"mediumType": "SMS"
}
]
},
{
"id": 2,
"serviceWindow": "Week-end",
"status": "Active",
"customer": "POST",
"serviceProvidedType": "Monitoring",
"drpContactList": [
{
"id": null,
"name": "Michel Palmas",
"timeStart": "10:00",
"timeEnd": "15:00",
"value": "+352 658 194 191",
"mediumType": "Phone"
}
]
},
{
"id": 3,
"serviceWindow": "Business hours",
"status": "Active",
"customer": "ING",
"serviceProvidedType": "Sharepoint",
"drpContactList": [
{
"id": null,
"name": "Alex Lapage",
"timeStart": "05:00",
"timeEnd": "10:00",
"value": "alex.lapage#ctg.com",
"mediumType": "Email"
}
]
},
{
"id": 4,
"serviceWindow": "Manage services",
"status": "Active",
"customer": "DEXIA",
"serviceProvidedType": "System Admin",
"drpContactList": [
{
"id": null,
"name": "Rémi Hirtz",
"timeStart": "19:30",
"timeEnd": "23:00",
"value": "+352 595 945 154",
"mediumType": "Phone"
}
]
},
{
"id": 5,
"serviceWindow": "Enterprise holiday",
"status": "Active",
"customer": "POST",
"serviceProvidedType": "Hands & Eyes",
"drpContactList": [
{
"id": null,
"name": "Thomas Jacobs",
"timeStart": "13:00",
"timeEnd": "18:30",
"value": "thomas.jacbos#ctg.com",
"mediumType": "Email"
}
]
},
{
"id": 6,
"serviceWindow": "24/7",
"status": "Active",
"customer": "BGL",
"serviceProvidedType": "IT Outsourcing",
"drpContactList": [
{
"id": null,
"name": "Adrien Lafonte",
"timeStart": "05:45",
"timeEnd": "10:30",
"value": "+352 151 615 842",
"mediumType": "SMS"
}
]
}
]
So there is an array of object in my principal object. How can I display the information of the second array ? I tried some tricks but I never found a good way. Here is my HTML and Typescript :
<table class="table table-hover table-condensed">
<th style="width:150px" align="center">Customer</th>
<th style="width:150px" align="center">Service provided</th>
<th style="width:150px" align="center">Service window</th>
<th style="width:150px" align="center">DRP contact name</th>
<th style="width:150px" align="center">Time Start</th>
<th style="width:150px" align="center">Time End</th>
<th style="width:150px" align="center">Medium</th>
<th style="width:150px" align="center">DRP contact address</th>
<th style="width:150px" align="center">Status</th>
<tr *ngFor="#drp of drps"
[class.selected]="drp === selectedDrp"
(click)="gotoEdit(drp)">
<td style="width:150px" align="center">{{drp.customer}}</td>
<td style="width:150px" align="center">{{drp.serviceProvidedType}}</td>
<td style="width:150px" align="center">{{drp.serviceWindow}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].name}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].timeStart}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].timeEnd}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].mediumType}}</td>
<td style="width:150px" align="center">{{drp.drpContactList[0].value}}</td>
<td style="width:150px" align="center">{{drp.status}}</td>
</tr>
</table>
As you can see, for the moment I only show the first objet in the array. Either I put everything in only one row or I can create as row as object in the array.
Here is the Typescript behind everything :
export class ListDrpsComponent extends BaseComponent implements OnInit {
drps:Drp[];
constructor(private _drpService:DrpService,
private messageService:MessageToUserService,
private _router:Router) {
super(_router, messageService);
}
onAddDrp() {
let link = ['AddDrp'];
this._router.navigate(link);
}
getDrps() {
this._drpService.getDrps().subscribe(
data => {
this.onNext(data)
},
(data)=> this.onError(data),
() => null
);
}
onNext(data:Response) {
super.onNext(data);
this.drps = <Drp[]> data.json();
console.log(this.drps);
}
ngOnInit() {
this.getDrps();
}
onError(data:Response) {
super.onError(data);
}
gotoEdit(drp:Drp) {
let link = ['EditDrp', {id: drp.id}];
this._router.navigate(link);
}
}
I'm sorry for the presentation of the code, I'm new here ! If you need more details, tell me, I will try to respond to your demand. And sorry for my English, it's not my native language, I'm still learning.
Cordially,
Florian
EDIT : Here is a picture of what the table looks like. I wanted to have one row per information if possible (so i should repeat the first object information as many times as there is object in the second array)
Table of DRP
Without modifying your model (plnkr):
<ng-template ngFor let-drp [ngForOf]="drps">
<tr *ngFor="let drpCt of drp.drpContactList"
[class.selected]="drp === selectedDrp"
(click)="gotoEdit(drp)">
<td style="width:150px" align="center">{{drp.customer}}</td>
<td style="width:150px" align="center">{{drp.serviceProvidedType}}</td>
<td style="width:150px" align="center">{{drp.serviceWindow}}</td>
<td style="width:150px" align="center">{{drpCt.name}}</td>
<td style="width:150px" align="center">{{drpCt.timeStart}}</td>
<td style="width:150px" align="center">{{drpCt.timeEnd}}</td>
<td style="width:150px" align="center">{{drpCt.mediumType}}</td>
<td style="width:150px" align="center">{{drpCt.value}}</td>
<td style="width:150px" align="center">{{drp.status}}</td>
</tr>
</ng-template>

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>

Creating a table header(th) and body(td) from json in angular app

I have an angular app where i am trying to create a table from a json. My json is as follows:
[
{
"campus_id": "321",
"name": "0"
},
{
"campus_id": "231",
"name": "1"
},
{
"campus_id": "123",
"name": "2"
}
]
Generally we will create a table in the html as follows:
<table class="table table-striped">
<tr>
<th>
Campus id
</th>
<th>
Name
</th>
</tr>
<tr ng-repeat="item in items">
<td >
{{item.campus_id}}
</td>
<td >
{{item.name}}
</td>
</tr>
</table>
How do i create even the headers from the json instead of defining them ourselves?
I would add the column headers within the json result like so
columnDefs: [
{field: 'campus_id', displayName: 'Campus ID'},
{field: 'name', displayName: 'Name'}],
data:
[
{
"campus_id": "57911000",
"name": "0"
},
{
"campus_id": "57911001",
"name": "HIGHLAND PARK HIGH SCHOOL"
},
{
"campus_id": "57911007",
"name": "P A S S Learning Center School"
}
]
otherwise you could use the key, value pairing ng-repeat="(key,value) in items" with a filter to return 1 row and then use {{key}}