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>
Related
I would like to create a table and populate it with data using vue.js and v-for but I don`t know how to access the nested JSON file.
If I simply call {{items}} the data is presented but there is no way i manage to filter it
here is my code:
<template>
<div id="app">
<thead>
</thead>
<tbody>
<table>
<thead>
<tr>
<th>id</th>
<th>press</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.results.downloadable.document_en }}</td>
<td>{{ item.}}</td>
</tr>
</tbody>
</table>
</tbody>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items:[]
}
},
created() {
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
.then(response => {
this.items = response.data
})
}
}
</script>
Based on the result of your endpoint you should change your assignment of items to
.then(response => {
this.items = response.data.results
})
And your loop to
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<!-- as downloadable is an array, see update below etc. -->
</tr>
But be aware - if you assign the data.results directly you will lose the so called "paginator" information that also contains the link to load more.
So another option would be to assign
this.items = response.data
HOWEVER, be aware that you should then define items in your data as null or empty object (not array, as this would be false)
And then change your loop to something like this (it's now looping in item.results)
<tbody v-if="items && items.results">
<tr v-for="item in items.results" :key="item.id">
<td>{{ item.id }}</td>
<!-- as downloadable is an array - see Update below etc. -->
</tr>
</tbody>
This approach would allow you to show the total count via items.count for example
UPDATE:
Actually downloadable is an array! I can only assume what you actually want to achieve to here. I've created a jsfiddle to showcase it: https://jsfiddle.net/v73xe4m5/1/
The main thing you probably want to do is filter the entry to only show entries where downloadable contains a document_en.
<tr v-for="item in items.results" :key="item.id">
<td>{{ item.id }}</td>
<td>
<div class="downloads">
<span
v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
:key="downloadable.id"
>{{ downloadable.document_en.file }}</span>
</div>
</td>
</tr>
I'm not familiar with that endpoint / api - so I don't know if it might return more than one relevant document per item.
As you can see I used a second v-for loop inside the <td> in order to go through all downloadable entries. Before doing so, they are filtered, so only entries that actually have a document_en value are shown. You can adapt this as you want.
Hope that helps!
this is the correct form to get the array from the json and save to this.items
this.items = response.data.results
I encourage you to always console.log(response) after api call , and access data according to the structure of the api results
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 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 have to generate a tree node with Angular. The object is called Page and each Page can have children and those children can also have their own children and so on.
Now I have to show the hierarchical structure in HTML from my Angular Page object.
Also, what I would want to indent the children like this:
Page parent #1
.... Child page of #1
......... Child of child page #1
Page parent #2
.... Child page of #2
........ Child of child page #2
You get the idea.
My page object is:
export class PageModel {
id!: number;
title?: string | undefined;
typeId?: string | undefined;
parentId?: number | undefined;
children?: PageModel[] | undefined;
publishedDateLocal?: string | undefined;
}
My html component is for now a simple table...
<table class="table">
<thead>
<tr>
<td>Title</td>
<td>Page Type</td>
<td>Published</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let page of model.pageModels">
<td>{{ page?.title }}</td>
<td>{{ page?.pageTypeId }}</td>
<td>{{ page?.publishedDateLocal }}</td>
<td>
<a class="remove" (click)="deletePage(page.id)" [routerLink]="">
<span class="glyphicon glyphicon-trash text-danger"></span>
</a>
<a [routerLink]="['/pageAddEdit', page.id]">
Edit
</a>
</td>
</tr>
</tbody>
</table>
Thank you for any help
I would recommend using a recursive structure for this.
Create a very simply component that takes PageModel as an input. You can then display that, and look through each of the children using *ngFor, like so:
#Component({
selector: 'hello',
template: `
<li>{{model.title}}</li>
<ul>
<hello *ngFor="let child of model.children" [model]="child"></hello>
</ul>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
#Input() model: PageModel;
}
Here is a simple
StackBlitz example
I am new to Angular2 so any help is much appreciated.
I am getting data in the form of a list<user>. Each user has a list of roles. So in typescript I created this user type:
export class User {
id: string;
firstName: string;
middleName: string;
lastName: string;
email: string;
roles: Role[];
}
I am parsing the data in above type form. 'users' is an array users: Array<User>; in that component.
Displaying the data I want to list out Role[] into comma separated values in like <td>admin, customer, writer</td>,
but what I am getting instead is:
<td>admin</td>
<td>customer</td>
<td>writer</td>
Here is the code I am trying:
<tr *ngFor="let user of users">
<td>{{user.id}}</td>
<td>{{user.firstName +' '+ user.middleName+' '+user.lastName}}</td>
<td>{{user.email}}</td>
<td *ngFor="let role of Role">{{role.name}}</td>
<td><button type="button" class="btn btn-primary " (click)="roleOnClick(user)"></button></td>
</tr>
How can I achieve something like <td> admin, customer, writer</td>?
<td *ngFor="let role of roles">{{role.name}}</td>
That line above says to repeat the <td> tag for each element of the Role array, which is why you're getting the behaviour that you're seeing.
If you just want to get a comma separated list of roles, you may just want to use a simple function call on the role array, for eg:
<td> {{ roles.join(', ') }} </td>
join is a function on the standard JavaScript Array class that allows you to combine the elements of the array simply. The parameter to the function is the text you want to place between each member of the array.