I have the following JSON response from a web service. I want to use it on the front end but the "codeSubstance" is not showing anything. How do I parse it correctly ?
I've tried the following :
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>{{m.compositions.substancesActives.codeSubstance}}</td>
</tr>
and this also
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>{{m.compositions.substancesActives["codeSubstance"]}}</td>
</tr>
Any help appreciated
compositions and substancesActives are again an array, so you should be iterating over it again
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>
<ng-container *ngFor="let comp of m.compositions">
<ng-container *ngFor="let sub of comp.substancesActives">
{{sub.codeSubstance}}
</ng-container>
</ng-container>
</td>
</tr>
hi i think you have an array in substancesActives, so try this :
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>{{m.compositions.substancesActives[0].codeSubstance}}</td>
</tr>
If it's ok, so add a new loop for substanceActives
EDIT (more details in comments) :
m.compositions[0].substancesActives[0].codeSubstance
Related
I am receiving the following data from an API:
[[9, "Brown", 2], [1, "Amy", 1]]
I want to show it in a table format in my Angular app. I have tried the following code, but I think it's not the right way to do it.
<tbody>
<tr *ngFor="let user of report">
<td>{{user[0]}}</td>
<td>{{user[1]}}</td>
<td>{{user[2]}}</td>
</tr>
</tbody>
It is array of array to you need to iterate two for loop in you case like this.
<table>
<tbody>
<tr *ngFor="let user of data">
<td *ngFor="let e of user">{{ e }}</td>
</tr>
</tbody>
</table>
I am new to angular. Just learning it.
I want to bind data with ngFor. but its not showing any data. Kindly help me to solve this
html file :
<tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
<td>{{agent?.id?agent?.id:''}}</td>
</tr>
</tbody>
error : <!--bindings={ "ng-reflect-ng-for-of": null }-->
Try removing the --> at the end of the first table cell and correct the binding on the second one.
<tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
<td>{{agent?.id}}</td>
</tr>
</tbody>
Also, you need to make sure that agentlist has something to iterate. maybe putting a console.log(agentlist) and see what it has inside of it in the ts class. If angelist is only declared but never defined you will get that error. Initialize angelist as an empty array to make sure that have an iterable before defining with the final data.
I have a table which contains list of informations from the database my problem how I can display the information of each line ,below this line,in other words i want more information about this line.
I have already managed to display the information but below the table .
<tbody>
<ng-container>
<tr *ngFor="let affectation of affectations">
<td>{{affectation[1]}}</td>
<td>{{affectation[2] }}</td>
<td>{{affectation[3]}}</td>
<td><button type="button" class="btaction"
(click)="getAffectationForEmploye(affectation[0])">Actionner</button></td>
--after clicking show more information about the line of table 1
</tr>
--show informations about the line of table 1
<tr [hidden]="!visionnerTableau" class="trDisplay" *ngFor="let affecter of affecters">
<td>{{affecter.fiche.nom}}</td>
<td>{{affecter.fiche.prenom}}</td>
<td>{{affecter.fiche.produit.nom_produit}}</td>
</tr>
</ng-container>
</tbody>
you should place the first for loop on the ng-container and if you just want to show information of 1 line at a time, you can use the index for this and a selectedItemIndex in your component and probably an ngIf instead of hidden to only invoke getAffectationForEmploye for the selected item. So something like this:
<tbody>
<ng-container *ngFor="let affectation of affectations; let i = index;">
<tr>
<td>{{affectation[1]}}</td>
<td>{{affectation[2] }}</td>
<td>{{affectation[3]}}</td>
<td><button type="button" class="btaction"
(click)="selectedItemIndex = index;">Actionner</button></td>
--after clicking show more information about the line of table 1
</tr>
--show informations about the line of table 1
<ng-container *ngIf="selectedItemIndex === index">
<tr class="trDisplay" *ngFor="let affecter of getAffectationForEmploye(affectation[0])">
<td>{{affecter.fiche.nom}}</td>
<td>{{affecter.fiche.prenom}}</td>
<td>{{affecter.fiche.produit.nom_produit}}</td>
</tr>
</ng-container>
</ng-container>
</tbody>
I am facing problem in showing dynamic table from JSON objects. I have two array. One array contains headers of the table and other array contains JSON objects.The problem is that I want the data to be shown in sequence of header array value from each JSON Object(each object is treated as row).
The code I have tried to show data is:
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</tr>
<tr *ngFor="let object of finalContactsArray;">
<td *ngIf="hasProp('FilteredKeys', 'id')">{{object.id}}</td>
<td *ngIf="hasProp('FilteredKeys', 'firstname')" >{{object.firstname}}</td>
<td *ngIf="hasProp('FilteredKeys', 'lastname')">{{object.lastname}}</td>
<td *ngIf="hasProp('FilteredKeys', 'prefix')">{{object.prefix}}</td>
</tr>
</table>
Filtered Key array is:
["id","firstname","prefix","lastname"]
finalContactArray is:
[{"id":"1","firstname":"Vikas"},{"id":"2","firstname":"Raj","lastname":""},{"id":"3","prefix":"Mr.","lastname":"sdsdfsd"},{"id":"4","prefix":"Mrs."},{"id":"5","firstname":"Hari","prefix":"Mr."}]
For demo of the problem the stackblitz is:
https://stackblitz.com/edit/angular-8cacgk
Here you can see that prefix column values are shown in lastname.How to get rid of this problem?
My working code:
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</tr>
<tr *ngFor="let object of finalContactsArray;">
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf="head==='id' && hasProp('FilteredKeys', 'id')">{{object[head]}}</td>
</ng-container>
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf=" head === 'prefix' && hasProp('FilteredKeys', 'prefix')" (click)="showalert()" style="cursor:pointer" >{{object[head]}}</td>
</ng-container>
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf=" head === 'firstname' && hasProp('FilteredKeys', 'firstname')" >{{object[head]}}</td>
</ng-container>
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf=" head === 'lastname' && hasProp('FilteredKeys', 'lastname')">{{object[head]}}</td>
</ng-container>
</tr>
If your data structure is this simple and the relationships are that direct, you can accomplish this with simple nested for loops:
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</tr>
<tr *ngFor="let object of finalContactsArray;">
<td *ngFor="let key of FilteredKeys"
(click)="key === 'prefix' && showalert()"
[ngStyle]="{'cursor': (key === 'prefix') ? 'pointer': 'default'}">
{{object[key] || ' '}}
</td>
</tr>
</table>
Just iterate through your rows and within rows iterate over your header keys to show the correct row property in the cell, and create cells for every column regardless of what the actual object contains. My example puts in a single space as a placeholder if no value for that column, but you could put whatever you want, all depends what your requirement is, but you need to create cells for every column, regardless of if the object has the property or not, otherwise the cells will never align correctly.
Seems to be the same requirement like AngularJS "Vertical" ng-repeat but solution doesn't work for *ngFor
I have this object array that I am trying to bind to an HTML table. Its format is something like below:
[
{
"Animal":"Dog",
"Country":"France",
"Food":"Tofu",
"Car":"Nano",
"Language":"TypeScript"
}
]
Now this can simply be formatted in the default HTML horizontal table way like this:
<table>
<tr>
<th>Animal</th>
<th>Country</th>
<th>Food</th>
<th>Car</th>
<th>Language</th>
</tr>
<tr *ngFor="let data of datas">
<td>{{data.Animal}}</td>
<td>{{data.Country}}</td>
<td>{{data.Food}}</td>
<td>{{data.Car}}</td>
<td>{{data.Language}}</td>
</tr>
</table>
This would create table like below(Please ignore the data in the table;its just to give an idea.):
But how would I create a structure like this with dynamic data(kind of a vertical table):
In Component:
this.arrayOfKeys = Object.keys(this.datas[0]);
html:
<table>
<tr *ngFor="let key of arrayOfKeys">
<th>{{key}}</th>
<td *ngFor="let data of datas">
{{data[key]}}
</td>
</tr>
</table>
Use ng-container if You have data structure similar to groups[].items[].name
So, if You want to add row
<table>
<ng-container *ngFor="let group of groups">
<tr>
<td>{{group.name}}</td>
</tr>
<tr *ngFor="let item of group.items">
<td>{{item.name}}</td>
</tr>
</ng-container>
</table>
Source: https://stackoverflow.com/a/44086855/1840185