I'm new to node and trying to retrieve data from mongodb and display it to the client.I'm using handlebars for this purpose.I'm retrieving data from mongo collection it's an array of json objects but not successfully display it in html.
Here is my code snippets :
Retrieving from mongodb:
usrRouter.route('/profile/projects')
.get(function(req,res){
project.find({pusername:userN},function (err,projects) {
if(err){console.log(err); }
else{
res.render('projects',{"project":projects})
}
});
});
It's Results:
Take a look on screenshoot
Html Code:
<table class="table table-striped">
<thead>
<tr>
<th>Project Name</th>
<th>Project Type</th>
<th>Project Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{#each project}}
<tr>
<td> {{projectName}} </td>
<td> {{projectType}} </td>
<td> {{projectDesc}} </td>
<td> <button class="btn btn-primary">Delete</button>
<span> <button class="btn btn-primary"> <i class="icon-download-alt"></i> Download</button>
</span> </td>
</tr>
{{/each}}
</tbody>
</table>
Related
I am trying to render a json as a table in a HTML Template using angularjs ng-repeat element. The script file passes the JSON object, but the ng-repeat wont render the contents of JSON.
I followed the steps from this tutorial link.
https://codepen.io/salva341/pen/aYKmvG
html template section where ng-repeat doesn't render properly
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="ttm in records.response" >
<td>{{ttm.name}} </td>
<td>{{ttm.status}} </td>
<td>{{ttm.name}} </td>
<td>{{ttm.name}} </td>
</tr>
</tbody>
</table>
</div>
app.js
angularjs 1.6.6
$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
$scope.records = {"response":response.data}
$scope.parseItem = function(string)
{
var newString = string.replace(/['\']/g,'');
var jsonFormated = JSON.parse(newString);
return jsonFormated.Message;
}
});
Google chrome inspector : Section inspection screenshot
I have used an angularjs add-on inspector for chrome.
It looks like ttm is the array you want to display for. So I believe your ng-repeat should be more like:
<tr ng-repeat="record in ttm" >
<td>{{record.name}} </td>
<td>{{record.status}} </td>
<td>{{record.name}} </td>
<td>{{record.name}} </td>
ttm being the array, and record being a made-up name for each item in that array.
See: https://www.w3schools.com/angular/ng_ng-repeat.asp
As per your code, your are referencing wrong array name in your HTML binding.
Try this
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="item in records.response.ttm" >
<td>{{item.name}} </td>
<td>{{item.status}} </td>
<td>{{item.name}} </td>
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
</div>
Finally I was was able to achieve what I wanted.
I added ng-bind element to display the data on the html template. That is weird. No of the scope variable gets displayed on the html template without ng-bind element. This investigating that is strange this is happening.
I would like to thank #Thaier Alkhateeb for their valuable comment.
Revised code snippet
<tbody ng-repeat="data in records.response ">
<tr ng-repeat="ttm in data">
<td ng-bind="ttm.name"> </td>
<td ng-bind="ttm.appId"> </td>
<td ng-bind="ttm.created"> </td>
<td ng-bind="ttm.status"> </td>
</tr>
</tbody>
I have a bootstrap table with expanding rows. Each row can expand into multiple rows, and those can too expand in multiple rows (3 levels in total).
The search does find items on the 3rd level but it doesn't display them correctly.
This is an example code on codepen.
https://codepen.io/anon/pen/gGOOBz
My HTML code is:
<table st-table="displayedCollection" st-safe-src="domains" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th st-sort="name">Domains</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Search ..." type="text" /></th>
</tr>
</thead>
<tbody ng-cloak>
<tr ng-repeat-start="row in displayedCollection">
<td id="package1-{{$index}}" class="accordion-toggle data-exists cursor-pointer" data-toggle="collapse" data-parent="#OrderPackages-{{$index}}" data-target=".packageDetails1-{{$index}}">{{row.name}}
</td>
</tr>
<tr ng-repeat-end>
<td id="package2-{{$index}}" colspan="3">
<div class="accordion-body collapse packageDetails1-{{$index}} + 1">
<table st-table="beansCollection" st-safe-src="types" class="table table-condensed" style="border-collapse:collapse;">
<!--<thead>
<tr>
<th st-sort="name">Types</th>
</tr>
</thead>-->
<tbody>
<tr ng-repeat-start="beanType in row.beans">
<td id="type1-{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#typePackages-{{$index}}" data-target=".typesDetails1-{{$index}}">
{{beanType.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, null, beanType)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default" ng-if="showButton(beanType.beans)">
Display
</button>
</td>
</tr>
<!---->
<tr ng-repeat-end ng-visible="false">
<td id="typeId2-{{$index}}" colspan="3">
<div class="accordion-body collapse typesDetails1-{{$index}} + 1">
<table class="table table-condensed">
<tbody>
<tr ng-repeat="leafBean in beanType.beans">
<td>
{{leafBean.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, leafBean.name, leafBean)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default">Display</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I want that when I search something under a certain row it would be displayed with the row above already expanded.
PHOTO:
Say I want to search for TBLEXCHANGEMEMBERSHIPS which is on the 3rd level.
When I input it into the search bar, it finds it but doesn't display it correctly.
What should I do?
I am trying to display information inside a table using a button to show and hide the data in each row using the row's id, but since I have 2 ng-repeat, the first loop is completed before the second and therefore all the data is displayed in the same row : here is my code :
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th>Projet</th>
<th>Responsable Apitech</th>
<th>Temps Passé</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="p in projetsListe" >
<td>
<button class="btn btn-xs" ng-click="expanded = !expanded" expand data-toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td>{{p.NomProjet}}</td>
<td>{{p.ResponsableApitech}}</td>
<td>Temps Passé</td>
</tr>
<tr ng-repeat-end ng-show="expanded">
<td></td>
<td colspan="6">
<table class="table table-condensed table-bordered">
<thead>
<th></th>
<th>Tache</th>
<th>Collaborateur</th>
<th>Date</th>
<th>Temps Passé</th>
</thead>
<tbody>
<tr ng-repeat= "ft in ftListesorted" ng-show="expanded" class="collapse {{ft.IdProjet}}">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>{{ft.NomTache}}</td>
<td>{{ft.NomCollaborateur}}</td>
<td>{{ft.Datefeuillestemps | date : 'dd/MM/yyyy' }}</td>
<td>{{ft.TempsPasse}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This is what im trying to achieve : http://embed.plnkr.co/qqNGSbw6oLUZbKqVQVpG/?show=preview
In my case :
This is what I get instead :
If you noticed in the second image get the information of the first and the second row while i want the information of each row seperatly.
Here is a plunker with an example of the problem : https://plnkr.co/edit/pPcPipLK0TltnOC60SSf
create expanded property for each row. Change this lines
<button class="btn btn-xs" ng-click="p.expanded = !p.expanded" expand data-
toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
and
<tr ng-repeat-end ng-show="p.expanded">
I am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.
I have a list of users for each of my stores [model.stores.users] in JSON object and currently show the number of users against each store by accessing store.users.length
Now I want two extra counts, these counts are just based on the number of users with a simple boolean filter.
Count of Active Users is where user.is_user_active = true
Count of Pending Users is where user.is_user_active = false
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="hidden">ID</th>
<th>Name</th>
<th>Users</th>
</tr>
</thead>
<tbody class="tbl-jobs-data" ng-repeat="item in model.stores">
<tr data-toggle="collapse" class="accordion-toggle" data-target="#store_user{{$index}}">
<td class="hidden">{{item.id}}</td>
<td class="">{{item.name}}</td>
<td class="user-count">{{item.users.length}}</td>
</tr>
<tr ng-if="item.users.length > 0">
<td colspan="100" class="hiddenRow">
<div class="accordian-body collapse" id="store_user{{$index}}">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>State</th>
<th>Is Active</th>
<th>Last Login</th>
</tr>
</thead>
<tbody class="tbl-search-data">
<tr ng-repeat="app in item.users">
<td>{{app.id}}</td>
<td>{{app.name}}</td>
<td>{{app.state}}</td>
<td>{{app.is_user_active}}</td>
<td>{{app.last_login}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Just use filter, eg
<td class="active_user_count">
{{ (item.users | filter : { is_user_active: true }).length }}
</td>
<td class="pending_user_count">
{{ (item.users | filter : { is_user_active: false }).length }}
</td>
I hope I've got the syntax right, the Angular docs are down at the moment >:(