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>
Related
I have an array of objects from which I take a name to create a list. When I click on one element of the list, a modal window should open to me in which detailed information about this element will be shown (you need to display a certain object), you can suggest how this can be implemented in Angular ?
You might want to try with a custom div modal, if you are using none of the ui kits or frameworks.
If you are using kits like material, you can use the material modal to display on clicking that item. To know which data to be passed, you can pass the id of the row data on clicking and then populate the required data from the array using filter().
for example, if you are using angular you are going to use *ngFor for array of objects
array of objects
eg:
ArrayObjects= [
{
"id": 1,
"place": "Sweden"
}, {
"id": 2,
"place": "USA"
}, {
"id": 3,
"place": "England"
}
]
if you are going to use to show data in table
<table>
<tr>
<th> Sl.No </th>
<th> Place </th>
<th> Popup Action </th>
</tr>
<tr *ngFor="let group of ArrayObjects; index as i">
<td> {{i+1}} </td>
<td> {{group.place}} </td>
<td (click)="ClickMeToGetParticularData(group, i)" > </td>
</tr>
</table>
In .ts part
ClickMeToGetParticularData(data, index){
console.log("Required data", data) ////////// use this to get data to show in popup
console.log("Required index", index) ///// if you want index
}
I have a simple Flask application with just one table.
So python code is irrelavantly simple:
#app.route('/')
def home():
items = long_db_request()
return render_template("index.html", items=items)
#app.route('/extended')
def extended():
return render_template("animals.html")
And items is a huge JSON object.
I created a table which reflects that data:
<table>
<tr>
<th style="text-align:center">id</th>
<th style="text-align:center">creation time</th>
<th style="text-align:center">name</th>
<th style="text-align:center">animals</th>
<th style="text-align:center">number</th>
</tr>
{% for item in items %}
<tr>
<td> {{ item.id }} </td>
<td> {{ item.time }} </td>
<td>
{{ item.name }}
</td>
<td> {{item.group}} </td>
<td>{{ item.group|length }}</td>
</tr>
{% endfor %}
</table>
The table looks like:
As you can see, column animal contains a lof of object which makes it all difficult to percieve.
I want it to be like this
which is a lot easier to get. And show animals is a link to another page, where a pure json exists.
How can I achieve this?
I followed the doc of jinja2 and Flask and found method url_for() but in that case I have to pass all my json in query which is unacceptable..
How can I jump from first image to exellent nice view of the second one?
working code with the first picture is place here
Thank you very much in advance!
P.S. I only saw one question here with rellevant topic, but it does not help me
Instead of passing all the animals (e.g. cats) from one view to another, just pass the category cats to the next page.
The view function for the next page then selects all cats from the json, and passes the cats then to the detailed view.
So, on you overview page, you render links like species.html?cats (and so on), and when somebody clicks on these links the view function selects all cats, and then passes them into a render_template("species.html", species=cats) view.
I am new to angular4 working over MEAN Stack My data is coming from Mongo DB in the form of a list of hyperlinks.Now I want that when I click over each link in UI, it should be opened as a separate link but as of now, it is opening a combined link i.e. it is taking as a single entry.
I am trying to pass ';' after each link in Mongo Db and at the UI level I am trying to separate/split based on each ';'.
<tbody>
<tr *ngFor="let item of items">
<td> {{ item.SNo }}</td>
<td> {{ item.UseCase }}</td>
<td>
{{ item.ReferenceMaterials }}
</td>
</tr>
</tbody>
My structure of JSON is:
{
"_id":"537437505593",
"SNo" :"1",
"UseCase":"hfwioegepepohgy",
"Focus":"hellow world",
"RefernceLinks":"link1";"link2";"link3"
}
These links are rendered to UI as link1;link2;link3.Clicking over link1 click over all other links also.Kindly help.
You need to create a custom pipe
#Pipe({
name: 'split'
})
export class SplitPipe implements PipeTransform {
transform(val:string, separator:string):string[] {
return val.split(separator);
}
}
And use it like this
<a *ngFor="let link of item.ReferenceMaterials|split" href="{{link}}">{{link}}</a>
Or item.RefernceLinks like your json shows...
Use ngFor.
<a *ngFor="let link of item.ReferenceMaterials" href="{{link}}">{{link}}</a>
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>
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>