I am working on a dashboard and am trying to display a certain piece of data. In my scope I have a project which consists of a couple fields and an array of users. The users consist of the following fields:
user_id
user_name
user_email
role
I want to display the user_name of the role which matches a certain value. Is there a way to do this within my html file or is it recommended to do this in my controller?
My table code looks as follows:
<tbody md-body>
<tr md-row md-select="project" md-select-id="name" md-auto-select
ng-repeat="project in projects.data | orderBy : myOrder">
<td md-cell ng-click="getProject()">{{project.title}}</td>
<td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
<td md-cell>{{project.phase}}</td>
<td md-cell>{{project.budget_indication}}</td>
<td md-cell>{{project.users}}</td> <!-- Display user with specific role -->
<td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
</tr>
</tbody>
Thanks in advance!
If the project.data contains objects which has the role property (project.role) then you could use angular filter to filter against that property like this
Search by role: <input type="text" ng-model="roleSearch">
<tbody md-body>
<tr md-row md-select="project" md-select-id="name" md-auto-select
ng-repeat="project in projects.data | filter:{ role: roleSearch }| orderBy : myOrder">
<td md-cell ng-click="getProject()">{{project.title}}</td>
<td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
<td md-cell>{{project.phase}}</td>
<td md-cell>{{project.budget_indication}}</td>
<td md-cell>{{project.users}}</td> <!-- Display user with specific role -->
<td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
</tr>
</tbody>
Read more about filters here.
More examples in this SO question
Update
To set the default filter value, you could set the roleSearch in the controller:
$scope.roleSearch = 'Admin';
To filter by the users.role add this filter
filter:{ users.role: roleSearch }
<tbody md-body>
<tr md-row md-select="project" md-select-id="name" md-auto-select
ng-repeat="project in projects.data | orderBy : myOrder" ng-if="project.users === 'role'">
<td md-cell ng-click="getProject()">{{project.title}}</td>
<td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
<td md-cell>{{project.phase}}</td>
<td md-cell>{{project.budget_indication}}</td>
<td md-cell> {{project.users}} </td> <!-- Display user with specific role -->
<td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
</tr>
</tbody>
Assuming role is specific role
You can use filter:role
<div>{{x.users | filter: role= "User"}}</div>
Here is an example I have taken to get your solution,
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
Role: {{ role ? role : 'All Data'}} <br><br>
<div ng-repeat="x in projects">
<div>{{x.users | filter: role= role}}</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.projects = [{
users: [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"Role": "User"
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden",
"Role": "Admin"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico",
"Role": "User"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria",
"Role": "Admin"
}
]
}]
$scope.role = "User"
});
</script>
</body>
</html>
Just change the role to "Admin" and check the filter
Here is the DEMO link which contain ADMIN role
Related
In Angular, I want to convert a JSON array to an HTML table.
I have seen an old answer for AngularJS:
<table>
<thead>
<tr>
<th ng-repeat="(key, value) in records[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in records">
<td ng-repeat="(key, value) in value">
{{value}}
</td>
</tr>
</tbody>
</table>
JSON looks like this:
[{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}]
I've tried to translate it to the Angular syntax. Here is what I got so far:
<table>
<thead>
<tr>
<th *ngFor="let item of records[0] | keyvalue">{{item.key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of records">
<td *ngFor="let item1 of item | keyvalue">
{{item1.value}}
</td>
</tr>
</tbody>
</table>
Right now it's failing to compile because records[0] is undefined... how can I translate this expression to the newer syntax (or create something equivalent)?
UPDATE 1:
I have a partial solution. However with this partial solution the rendered table is not completely identical to the older AngularJS rendition (because it creates multiple unnecessary header rows, which only one of them is populated, as opposed to only one header row in the older rendition).
<table style="border-collapse: collapse;">
<thead *ngFor="let item of records; let last=last">
<tr *ngIf="last">
<th *ngFor="let item1 of item | keyvalue">
{{item1.key}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of records">
<td *ngFor="let item1 of item | keyvalue">
{{item1.value}}
</td>
</tr>
</tbody>
</table>
Do you have a better way to do it, possibly similar to the older AngularJS version?
UPDATE 2:
In Angular, I access the JSON data through a request from Angular that is then redirected to a back end service. That service may read a file, or get the data from a database. When the back end service has the data ready, it returns the data to the Angular request. The code on the Angular end looks like this:
HTML:
<div>
<h3>Test Post Request</h3>
<button (click)="postData()">Click Me</button>
<div>Response: {{records}}</div>
</div>
TypeScript:
private dataPostTestUrl = '/api/postTest';
records: string | undefined;
public postData(): void {
this.appService.sendData().subscribe((data: any) => {
this.records = data.content;
});
}
public sendData(): Observable<any> {
return this.http.post(this.dataPostTestUrl, {});
}
I think maybe you need to define records in the component.
records = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}];
I am fairly certain this is what you need: https://stackblitz.com/edit/angular-ivy-n7irpw?file=src/app/hello.component.ts
Take a look at how I import the file in the app.component.ts
As well as how I loop in the HTML.
Let me know if it helps!
I have the following firebase JSON object:
"items" : {
"111111111111" : {
"ins" : { <<<<<<<<< I want to display the length of this
"1523878813443" : true,
"1523878891312" : true,
"1523878911379" : true,
"1523879091312" : true
},
"name" : "10",
"outs" : { <<<<<<<<< and this one too
"1523878813443" : true,
"1523878891312" : true,
"1523878911379" : true
},
"ownerID" : "QpMHsVHHRrMvk92rbSQvcYEv4en1"
}
}
Here is the template part on where I am trying to get these values to update:
<tbody>
<tr v-for="item in items" >
<td>
{{item.childone - door.childtwo}}
</td>
<td>
{{item.childone}}
</td>
<td>
{{item.childtwo}}
</td>
</tr>
</tbody>
I got it to display the JSON object like this:
The "In's" column should display 4, the "Out's" should display 3 and the "Balance" column should display 1.
This is the firebase setup and data code on my component:
import firebase { doorsRef } from '../firebase-config';
export default {
firebase() {
return {
items: itemsRef,
}
},
...etc
}
Any kind soul out there who would be willing to help?
Knowing that a JSON object has keys (and values) I have used this on my template instead:
{{Object.keys(JSON.Object).length}}
So in my case this did the trick:
<tbody>
<tr v-for="item in items" >
<td>
{{Object.keys(item.childone).length - Object.keys(item.childtwo).length}}
</td>
<td>
{{Object.keys(item.childone).length}}
</td>
<td>
{{Object.keys(item.childtwo).length}}
</td>
</tr>
</tbody>
Alternative you you can also count the number of values: {{Object.values(JSON.Object).length}}
I have to display name and ownername in html page, data is in JSON format (from MongoDB database)
While displaying in html, I am getting name correctly but ownername is not displaying properly instead it's displaying the complete object inside owner.
Json:
/* 1 */
{
"_id" : ObjectId("550994e21cba9597624195aa"),
"name" : "Deploy Renderer Code",
"detail" : "Deploy Renderer code in PROD 1 boxes.",
"scheduledStartDate" : ISODate("2015-05-12T09:00:00.000Z"),
"scheduledEndDate" : ISODate("2015-05-12T11:00:00.000Z"),
"env" : "PROD 1",
"type" : "Pre Release Activity",
"team" : {
"id" : "55097d581cba95976241958d",
"name" : "Renderer"
},
"owners" : [
{
"ownerName" : {
"id" : "VENKAT17",
"name" : "Sundar Venkataraman"
},
"ownerTeam" : {
"id" : "550992951cba9597624195a8",
"name" : "RETS"
}
}
],
"comments" : "Add SPI number, if any.",
"release" : {
"id" : "5509904f1cba9597624195a5",
"name" : "LexisAdvance R5.1"
},
"status" : "Assigned"
}
Angular view (html code)
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th style="text-align: center;">Task name</th>
<th style="text-align: center;">Owner name</th>
<th style="text-align: center;">Authorize</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskDetails">
<td style="text-align: center;">{{task.name}}</td>
<td style="text-align: center;">{{task.owners}}</td>
<td style="text-align:center;">
<button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf(task), task)">Approve</button>
<button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf(task), task)">Reject</button>
</td>
![enter image description here][1]</tr>
</tbody>
</table>
task.owners is a list of objects. To get the first owner, you would use:
<td style="text-align: center;">{{task.owners[0].ownerName.name}}</td>
Looping through all owners will be better:
<td style="text-align: center;">
<span ng-repeat="owner in task.owners">{{owner.ownerName.name}}{{$last ? '' : ', '}}</span>
</td>
I'm new in thymeleaf. i'm stuck in one place where i need to iterate through a list of strings which is present inside another list. For example, ihave a json like this :
{
"_id" : ObjectId("54e1865423asgj086"),
"Name" : "Carbon Utility",
"Modified In " : "DEC 5th",
"Imported" : "N",
"Classification" : "Functional SW delivery",
"Type Designation" : "Heavy Use",
"StateList" : [
{
"name" : "Create",
"currentStatus" : "False",
"stateDuration" : "336264 "
},
{
"name" : "Implement",
"currentStatus" : "False",
"stateDuration" : "1393827 "
},
{
"name" : "RampUp",
"currentStatus" : "False",
"stateDuration" : "34 "
},
]
}
in my Controller, i'm adding this to a object.
#RequestMapping(value = "/Search1", method = RequestMethod.GET)
public String showEntity( #RequestParam("type") String typeNameid,Model model,HttpSession session) {
------ my other stuffs--------
---- here i'm getting data from other html and spliting to add to model----
model.addAttribute("resultSourceDbObject",migrationSourceDataBean.getResultSourceDbObject());
return "wipdm/Display";
}
Now, in my html page. I'm able to print the id,name and type desgination. but i'm stuck in iterating through the statelist. For each statelist i have to create a separate subfolder inside a table and need to display the name,status and duration. I'm trying this but not working.
<table id="example-advanced" class="table table-striped table-bordered table-hover" style=" font-size:1.1em;">
<thead class="dark-border-bottom">
<tr>
<th style="text-align:center"> Key</th>
<th style="text-align:center">Values</th>
</tr>
</thead>
<tbody>
<tr data-tt-id='1'><td><span class="file"> Type</span></td><td><span th:text="${resultSourceDbObject.getString('Type Designation')}"></span> </td></tr>
<tr data-tt-id='1'><td><span class="file"> Name</span></td><td><span th:text="${resultSourceDbObject.getString('Name')}"></span> </td></tr>
<tr data-tt-id='1'><td><span class="file"> id</span></td><td><span th:text="${resultSourceDbObject.getString('_id')}"></span> </td></tr>
<tr data-tt-id='2'><td><span class='folder'>Statelist</span></td><td></td></tr>
<tr data-tt-id='2-1' data-tt-parent-id='2' th:each="relresult : ${resultSourceDbObject.getString('StateList')}"><td><span class='folder' th:text="Relationship" >Relationship</span></td><td>Folder</td></tr>
<tr data-tt-id='2-1-1' data-tt-parent-id='2-1'><td><span class='file' >name</span></td><td th:text="${relresult.getString('name')}">Release</td></tr>
<tr data-tt-id='2-1-2' data-tt-parent-id='2-1'><td><span class='file'>currentstatus</span></td><td th:text="${relresult.getString('currentStatus')}">132456424</td></tr>
<tr data-tt-id='2-1-3' data-tt-parent-id='2-1'><td><span class='file'>Stateduration</span></td><td th:text="${relresult.getString('stateDuration')}">16572464</td></tr>
</tbody>
</table>
Can anybody tell me where i'm going wrong and how to acheive this.? Thanks in advance.
I'm not sure exactly what type of object migrationSourceDataBean.getResultSourceDbObject() is returning, but resultSourceDbObject.getString('StateList') won't be returning what you need. (I guess it's just giving you the JSON?)
Assuming it's something similar to JSONObject you should be calling getJSONArray() (or similar) which will give you the nested list which you can then iterate over.
I am using ajax call to get data its return data in json format like below:
{ "d" : [
{ "Goal" : "Some one client",
"GoalID" : 1,
"IsPublic" : true,
"MemberName" : "user1"
},
{ "Goal" : " this is goal",
"GoalID" : 1,
"IsPublic" : false,
"MemberName" : "user2"
},
{ "Goal" : "Get call",
"GoalID" : 4,
"IsPublic" : true,
"MemberName" : "user2"
}
] }
Now in my html page i want to create separate table for each user. Here is my table
//want username here then table for goal of that user
<table>
<thead>
<tr class="headerRow">
<th>member</th>
<th>
Goals
</th>
</tr>
</thead>
<tbody data-bind="foreach: tasks">
<tr">
<td>
<span data-bind="text: members" />
</td>
<td>
<span data-bind="text: goal" />
</td>
</tr>
</tbody>
</table>
And "task" is the observable array containing all goal details.
This is my goal constuctor in javascript
function Goal(data) {
var self = this;
self.goalID = data.GoalID;
self.goal = data.Goal;
self.isPublic = ko.observable(data.IsPublic);
self.members = ko.observable(data.MemberName);
}
Maybe it is not the best solution but it will work. Add computed that returns all users:
self.users = ko.computed(function(){
var list = ko.utils.arrayMap(self.tasks(), function(item){
return item.members
});
return ko.utils.arrayGetDistinctValues(list);
});
And using foreach binding create a table for each user:
<div data-bind="foreach: users">
<table>
<thead>
<tr>
<th>membername</th>
<th>
Goals
</th>
</tr>
</thead>
<tbody data-bind="foreach: $parent.tasks">
<tr data-bind="if: members == $parent">
<td>
<span data-bind="text: members" />
</td>
<td>
<span data-bind="text: goals" />
</td>
</tr>
</tbody>
</table>
</div>
Here is working fiddle: http://jsfiddle.net/TQXja/4/