The JSON I am getting back from the API is nested FIRST by field (i.e. table columns), THEN by record(i.e. table rows). So, the JSON looks like this:
myJSON = {
'data':{
'id': [1,2,3],
'groks':['a','b','c']
}
}
I'm trying to use angular to display them correctly in my table. This is how they're supposed to look:
id groks
1 a
2 b
3 c
It's not as simple as
<tbody ng-repeat="x in myJSON.data">
<tr>
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
</tr>
</tbody>
Because I'll end up with this, or somesuch:
id groks
a b
1 2
So, how do I tell the ng-repeat to FIRST iterate through the inner rows, THEN through the outer columns?
The long way is to pre-manipulate the JSON into a format that can be iterated. i.e. I need to manipulate the data until it looks like this:
myJSON = {
'data':{
['id': 1,'groks':'a'],
['id': 2,'groks':'b'],
['id': 3,'groks':'c']
}
}
And then I can do this:
<tbody ng-repeat="x in myJSON.data">
<tr>
<td>{{x.id}}</td>
<td>{{x.groks}}</td>
</tr>
</tbody>
But do I have any alternate options?
You can just iterate over one of the arrays and use $index to get the corresponding elements in any other arrays:
<tbody ng-repeat="id in myJSON.data.id">
<tr>
<td>{{id}}</td>
<td>{{myJSON.data.gorks[$index]}}</td>
</tr>
</tbody>
Related
i managed to retrieve non-null json data from backend and i want to display this in table form, can anyone help me, how to display json data like below into table in angular?
{"2020-12-17":
{"tanggal": "2020-12-17", "kurs_jual": "10781.030615606935", "kurs_beli": "10673.605766653045"},
"2020-12-18":
{"tanggal": "2020-12-18", "kurs_jual": "10790.980751228397", "kurs_beli": "10682.253685484742"}
}
this is the html code to display the json data in the table
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Sell</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<tr *ngFor="forecast_table let data">
<td>{{data['tanggal'].tanggal}}</td>
<td>{{data['tanggal'].kurs_jual}}</td>
<td>{{data['tanggal'].kurs_beli}}</td>
</tr>
</tbody>
</table>
If you have the data in JSON format you could parse the data first. This will parse the json to a js Object.
const obj = JSON.parse(jsonData);
Then you could extract the entries that you want to display in your table.
const rows = Object.values(obj);
Finally use the variable rows to iterate in your table.
<tr *ngFor="let data of rows">
<td>{{data.tanggal}}</td>
<td>{{data.kurs_jual}}</td>
<td>{{data.kurs_beli}}</td>
</tr>
Note that if you got the json response with HTTPClient and the responseType is json, you dont need to do the parsing. The response will be already parsed and you could use it directly as a js Object.
I have an array of objects. I have two tables on the screen. I want n-1 elements in top table and the last element to be displayed in bottom column.
HTML top table:
<th>name</th>
<th>age</th>
<tr *ngFor="let key of array">
<td> {{key.name}}</td>
<td> {{key.age}}</td>
HTML bottom table:
<th></th>
<th>age</th>
<tr *ngFor="let key of array">
<td></td>
<td> {{key.age}}</td>
suppose if there are 5 elements, 4 should be displayed at top and last at bottom. In api response I am getting a single array of objects and last object should always be in the bottom table. Also, last table does not have a name column. It returns a string "Final Name". Can this be used to detect that if name === Final Name then remove it from array and show it else where?
What should be the for loop condition for it? Should I slice last element from array and store it in temp array in .ts file?
You could create a variable to store the last array object in your ts file then pop the array to this variable. E.g:
component.ts:
export class YourComponent {
lastItem: YourType;
...
lastItem = myArray.pop();
This will remove the last item and assign it to lastItem variable which can be used to populate your bottom table.
HTML bottom table:
<th></th>
<th>age</th>
<tr>
<td></td>
<td> {{lastItem.age}}</td>
Ok first of all use the *ngFor like this
*ngFor="let item of items; let i = index"
And you can apply condition like
*ngIf="i!=array.length"
And by using index you can print those last array elements separately
given the following object:
{
key1: ["val1","val2","val3","val4"],
key2: ["val2","val5","val22","val4","val8","val1"],
key3: ["val1"],
key4: ["val11","val12"]
}
Is it possible to iterate over all the values in one time using ng-repeat?
My motivation is:
1. I use ng-repeat in a <tr> tag, which CANNOT be placed in the <tbody> and i need to create a row in the table for each value e.g:
<tr>
<td>key1.val1</td>
</tr>
<tr>
<td>key1.val2</td>
</tr>
<tr>
<td>key1.val3</td>
</tr>
<tr>
<td>key1.val4</td>
</tr>
<tr>
<td>key2.val2</td>
</tr>
<tr>
<td>key2.val5</td>
</tr>
... and so on ...
I do not know the keys or value in advanced. I get them through an API
Any Ideas?
Thanks!
As your keys are properties of an object I would convert it to an array in a first step:
$scope.keys = [];
for (var property in object) {
if (object.hasOwnProperty(property)) {
$scope.keys.push(object.property);
}
}
Then you may display all values with a nested ng-repeat directive:
<div ng-repeat="key in keys">
<div ng-repeat="val in key[$index]">
{{val}}
Edit: There's also a way to iterate over the object properties directly
<div ng-repeat="(key, value) in myObj"> ... </div>
Like documented here:
$scope.allValues = [];
angular.forEach(object, function(array) {
array.forEach(function(value) {
$scope.allValues.push(value);
});
});
Then simply use an ng-repeat on allValues.
I have a table I am creating that looks like this:
<table>
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
</thead>
<tbody>
{{#each []}}
<tr>
<td>{{this.val1}}</td>
<td>{{this.val2}}</td>
<td>{{this.val3}}</td>
<td>{{this.val4}}</td>
</tr>
{{/each}}
</tbody>
I want it to be the case that if val1, for instance, is greater than some value X, it will appear red.
How can I pass HTML into the template once some pre-defined condition - like the above example - is satisfied?
Ideally you should be driving this functionality using your models.
You could achieve the desired functionality using Marionette CollectionView. Each model in the collection should look something like:
var Model = Backbone.Model.extend({
initialize: function(){
/* On initialize, we call our method to set additional computed properties */
this.setProperty();
}
setProperty: function() {
if (this.get("someProperty") > x) {
this.set("className", "css-class")
}
}
});
Then from within your ItemView template you should be able to set the class on your table row item
<tr class="{{this.className}}">
<td>{{this.val1}}</td>
<td>{{this.val2}}</td>
<td>{{this.val3}}</td>
<td>{{this.val4}}</td>
</tr>
I have an HTML table that pulls in data that is stored locally. It searches through the model in the foreach loop and then displays the information in two columns (Patient Name & SiteID). Is there a way that I can display the information so that it is organized by SiteID?
<table id="patient_table">
<tr>
<th>Patient Name</th>
<th>Site ID</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#string.Format("{0} {1}", item.FirstName, item.LastName)</td>
<td class="TableAlign">#Html.ActionLink(string.Format("{0}", item.SiteId), "Details", "Site", new { id = item.SiteId }, null)</td>
</tr>
}
</table>
Your question has knockout.js tagged. However, your example code is using ASP.NET and Razor to iterate through your Model.
Based on what you have presented, if your Model is IEnumerable I would alter your #foreach like so, which should order the displayed information by SiteId:
#foreach (var item in Model.OrderBy(x => x.SiteId))
You can try that :)
this.allItems(this.allItems().sort(function(a, b) { return a.SiteId > b.SiteId ;}));