I have my json data coming from DB , however column names may be different by different project and I need to show it in table using angularjs, How Can I iterate over the json data using ng-repeat using another ng-repeat for keys.
For example
data = {
"id": 2,
"project": "wewe2012",
"date": "2013-02-26",
"description": "ewew",
"eet_no": "ewew",
}
now while rendering , I don't know the keys which comes in json data but I can pass array of keys like
keys = ['id','project','date','description']
Now I want to use each key from keys and render on HTML, Please help
I have tried something like this, but did not help.
<tr ng-repeat='item in data'>
<span ng-repeat = key in keys>
<div>{{ item.key }}</div>
Try this:
<tr ng-repeat='item in data'>
<span ng-repeat="key in item">
<div>{{ item[key] }}</div>
You could generate table header like this:
<!-- table header -->
<tr>
<th ng-repeat="(key, value) in data">{{key}}</th>
</tr>
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 want to navigate to an URL based on the key of an object in my database, but when i acces the p.$key value is always undefined.
service:
getAll(){
return this.db.list('/products').valueChanges();
}
component:
products$;
constructor(private productService: ProductService) {
this.products$ = this.productService.getAll();
}
html:
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of products$ | async">
<td>{{p.title}}</td>
<td>{{p.price}}</td>
<td>
<a [routerLink]="['/admin/products/', p.$key]" >Edit</a>
</td>
</tr>
</tbody>
</table>
I am getting the right values for p.title and p.price, but p.$key is always undefined. I also tried p.key , same thing.
The valueChanges() stream doesn't include the key of the nodes. According to the AngularFire documentation on [valueChanges](When would you not use it? - When you need a more complex data structure than an array or you need the key of each snapshot for data manipulation methods. This method assumes you either are saving the key for the snapshot data or using a "readonly" approach.):
When would you not use it? - When you need a more complex data structure than an array or you need the key of each snapshot for data manipulation methods. This method assumes you either are saving the key for the snapshot data or using a "readonly" approach.
I think you may want to use the snapshotChanges stream instead, which gives you the entire DataSnapshot for each object from which you can get the key and the val().
Service:
Pipe is not necessary. I used it so you can console.log your object to view.
getAll(){
return this.db.list('/products').snapshotChanges()
.pipe(
map(object => {
console.log(object);
return object;
})
);
}
Component
Same as yours
html
<span *ngFor="let item of items$ | async">
<!-- print out the key values -->
{{item.key}}
</span>
I am working on a project using spring and angularJS.I am trying to view the data of a table on UI.
My problem is that I have array inside the array.So,I would like to binding data using angularJS . I have an array inside my output as the above example:
GET request:
{
id:"1",
fullName:"Name",
courses: [{
id:1,
title:"test"
}]}
}
If i use the {{customer.courses}} I get in my table this : {id:1, title:"test"}
But I would like to view only the title?
<tr ng-repeat="customer in customers">
<td>{{ customer.fullname}}</td>->fullName
<td>{{ customer.courses}}</td>->{id:1, title:"test"}
<tr>
I am trying making another ng-repeat =course in courses. But as a result I get all the title at each customer. How can I get the customer's course in order to view the data correctly?
I try also customer.courses[0] this but the result is the same and also customer.courses[1] but nothing appears...
If you want something like that :
FullName | Course1| Course 2
You can do :
<tr ng-repeat="customer in customers">
<td>{{ customer.fullname}}</td>
<td ng-repeat="course in customer.courses">{{course}}</td>
</tr>
I'm working on a project where I created a table component which is used on multiple pages with different configuration. Every table has it's configuration in a separate file where I store keys, titles and size classes for each column.
Data for each table body come from REST calls and they are loaded dynamically, paginated and then displayed.
<template slot="thead">
<tr>
<th v-for="item in headers" :key="item.id" :class="item.classes">{{item.title}}</th>
</tr>
</template>
<template slot="tbody">
<tr v-for="skill in paginatedSkills"
:key="skill.id"
v-on:click="selectRow(skill)"
v-bind:class="{selectedRow: selectedSkill === skill}"
>
<td class="cell-l">{{skill.name}}</td>
<td class="cell-m">{{skill.owner}}</td>
<td class="cell-s">{{skill.complexity}}</td>
<td class="cell-full">{{skill.description}}</td>
</tr>
</template>
What I want to do is to avoid writing size class for every single cell in the tbody loop. I was hoping to get index of looped object and use it to retrieve the class from config object which is used to populate cells in thead.
<tr v-for="(skill, index) in paginatedSkills" ...>
<td class="{headers[index].classes}">{{skill.name}}</td>
Using index on headers will return the correct item but as a string so obviously classes are not accessible. Any idea how to tweak it?
This options are no go, failing on compile
<td :class="{JSON.parse(headers[index]).classes}">{{skill.name}}</td>
<td :class="{JSON.parse(headers)[index].classes}">{{skill.name}}</td>
<td :class="{{JSON.parse(headers[index]).classes}}">{{skill.name}}</td>
To set class from a variable/property you have two options:
<td v-bind:class="headers[index].classes">{{skill.name}}</td>
<td :class="headers[index].classes">{{skill.name}}</td>
No need for curly braces here since v-bind already expects JS expression.
Update:
What you can also do, is to associate keys of skill object (name, owner, complexity, description) with their header, so each item of headers array will also have for example key property used to access value from skill object:
headers: [
{ id: 1, classes: 'cell-l', title: 'title', key: 'name' },
{ id: 2, classes: 'cell-s', title: 'title', key: 'owner' },
...
]
Thus, your code can be simplified the following way:
<tr v-for="skill in paginatedSkills" ...>
<td v-for="header in headers" v-bind:class="header.classes">{{skill[header.key]}}</td>
</tr>
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>