$(function() {
var companyId = 1740963;
JA.get('api/' + companyId + '/Transaction', function(data) {
if (!data)
return;
var items = data.Items;
if (!items)
return;
for (var i = 0; i < items.length; i++) {
var expense = items[i];
JA.renderTemplateFromPath('expenseListRow', items[i], function(template) {
var $template = $(template);
$('#expenseListBody').append($template);
$template.find('.expenseDate p').html(function(index, value) {
return moment(value, "YYYY-MM-DDTHH:mm:ss").format("DD/MM/YYYY");
});
})
}
});
})
<table id="expenseList">
<tr id="expenseListHead">
<th id="numberID">Number</th>
<th>Date</th>
<th>Name</th>
<th>Description</th>
<th>Reference</th>
<th class="alignRight">Amount</th>
<th class="alignRight"></th>
</tr>
<tbody id="expenseListBody">
<tr class="expenseListRow">
<td></td>
<td class="expenseDate"></td>
<td></td>
<td></td>
<td></td>
<td class="alignRight"></td>
<td class="alignRight"></td>
</tr>
</tbody>
</table>
As you can see in the image, there are multiple numbers in random order being pulled from an API, the list carry's on for a while.
What I am wondering is if anyone could help me work out how to sort these numbers in ascending order (starting from 1) and so on, instead of it adding them randomly, like I said this data is being pulled from an API that has been written so I'm struggling to work out how to do this. If anymore info is needed to help answer let me know. Thanks in advance.
If your list contains only numbers you can use the sort function available with Array. just call
var sortedList = yourList.sort();
If its an array of objects and the numbers are inside as a field then you can override the sort function as mentioned here
I have a table that is being populated from database through an angularJS array.
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th>Budget Amount</th>
<th>Actual Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lineItem in vm.budget.budgetLines">
<td>
{{lineItem.code}}
</td>
<td>#{{lineItem.description}}</td>
<td>{{lineItem.budgetAmount | currency}}</td>
<td><input type="number" class="form-control" ng-model="lineItem.actualAmount" required /></td>
</tr>
</tbody>
</table>
The data population works fine. But if you look at the table, you would notice an input field in the last column. I need to be able to perform an update with changes made to the input for which I need just the 1st and last column for the operation. I used the following approach but it didn't work because it just used the original values with which the table was first populated.
$scope.lineItems = [];
for (var i = 0; i < vm.budget.budgetLines.length; i++) {
var lineItem = vm.budget.budgetLines[i];
$scope.lineItems.push({
'code': lineItem.code,
'actualAmount': lineItem.actualAmount
});
}
So I thought of using pure javascript inside my angular controller to loop through the table rows and push the columns I need in the array like so;
var myTable = document.getElementById("tblValues");
var current, cell;
for (var i = 0; i < myTable.rows.length ; i++) {
var rowItem = myTable.rows[i];
$scope.lineItems.push({
'code': rowItem.cells[1],
'actualAmount': rowItem.cells[4].children[0].value
});
}
But an error is thrown in the console: rowItem.cells[4].children[0] is undefined
Please how can I get this to work just the way I want it?
I got it to work just the way I desired it to.
var myTable = document.getElementById("tblValues");
var current, cell;
$scope.lineItems.length = 0;
for (var i = 0; i < myTable.rows.length ; i++) {
var rowItem = myTable.rows[i + 1];
$scope.lineItems.push({
'code': rowItem.cells[1].innerText,
'actualAmount': rowItem.cells[4].firstChild.value
});
}
I'm having a bit of a weird problem and there are now 2 people in my office completely stumped by this (so I hope it's not something embarrassingly obvious!).
As an overview, we have a SQLite database that could contain any number of tables, each with any number of rows or columns. We want to display this data in a page in an Electron app.
We have an Angular page in our Electron app (with Express/Node as a backend) which makes some calls to an Express endpoint (which gets data from the SQLite db) and we end up with two 2D arrays of data - one for the table headers ($scope.tableHeaders) and one for the table content ($scope.documentsList).
The code for the calls is below:
$http.get('http://localhost:3000/tableCount').then(function (res) {
if (res.data.numberoftables) {
$scope.count = res.data.numberoftables;
var i;
$scope.documentsList = new Array();
$scope.tableHeaders = new Array();
for (i = 1; i <= $scope.count; i++) {
var tableNo = i;
//loop through tables
***$http.get('http://localhost:3000/doclist/' + tableNo).then(function (resDocs) {
//get table content
if (resDocs.data) {
***$scope.documentsList.push(resDocs.data);
}
});
$http.get('http://localhost:3000/tableColumns/' + tableNo).then(function (resHeads) {
//get table headers
if (resHeads.data) {
$scope.tableHeaders.push(resHeads.data);
}
});
}
}
});
Just for fun, here's our HTML:
<div id="documentTables">
<div ng-repeat="tableID in getNumberArray(count)">
<table st-table="documentsList[tableID]" class="table table-condensed table-hover">
<thead>
<tr st-safe-src="tableHeaders[tableID]">
<th ng-repeat="col in tableHeaders[tableID]">
{{col}}
</th>
</tr>
<tr st-safe-src="tableHeaders[tableID]" colspan="{{tableHeaders[tableID].length}}">
<th colspan="1" ng-repeat="col in tableHeaders[tableID]">
<input id="{{col + 'searchbox' + tableID}}" st-search="col" placeholder="{{col}}" class="input-sm form-control" type="search" />
</th>
</tr>
</thead>
<tbody>
<tr st-safe-src="documentsList[tableID]" ng-repeat="document in documentsList[tableID]">
<td ng-repeat="col in tableHeaders[tableID]">
{{document[col].value}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="{{tableHeaders[tableID].length}}" class="text-center">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The problem we're coming across is that no actual data is displayed in the tables. Somewhere between the starred lines (***) in the JS above, an empty array for each table is added. So if we have two tables in our database, we end up with documentsList = Array[4] with documentsList[0] and documentsList[1] being empty arrays. Why/where would this be happening, and how can I fix it?
Note - if you'd like to test this out without our endpoints, try out these variables:
$scope.count = 2;
$scope.tableHeaders = [["TabNo", "Document", "PageNumber", "Date"],["TabNo", "Document", "PageNumber"]];
$scope.documentsList = [];
$scope.documentsList.push(JSON.parse('[{"idANX":1,"pathANX":"Product Overview.pdf","isHeaderANX":1,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Product Overview.pdf","isLastCell":false,"value":"Product Overview"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1 - 2"},"Date":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":true,"value":"18 August 2015"}},{"idANX":2,"pathANX":"Spec.pdf","isHeaderANX":0,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"2"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Spec.pdf","isLastCell":false,"value":"Spec"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"3 - 4"},"Date":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":true,"value":"1 April 2015"}}]');
$scope.documentsList.push(JSON.parse('[{"idANX":1,"pathANX":"Product Overview.pdf","isHeaderANX":0,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Product Overview.pdf","isLastCell":false,"value":"Product Overview"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1 - 2"}},{"idANX":2,"pathANX":"Spec.pdf","isHeaderANX":0,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"2"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Spec.pdf","isLastCell":false,"value":"Spec"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"3 - 4"}}]');
$scope.getNumberArray = function (num) {
var n = new Array(num);
var i;
for (i = 0; i < num; i++) {
n[i] = i;
}
return n;
}
$scope.rowClass = function (row) {
if (row.isSubHeaderANX == 1) {
return 'subheader';
} else if (row.isHeaderANX == 1) {
return 'header';
}
else { return 'doctablerow'; }
}
Also pagination and filtering don't work but that's an issue for when our table actually contains data.
Edit: Probably should have mentioned that this is using angular-smart-table
You should take a look at how asynchronous requests and promises works. To make your code run you could do this: var promises = []; // Creates an array to store the promises
$http.get('http://localhost:3000/tableCount').then(function (res) {
if (res.data.numberoftables) {
$scope.count = res.data.numberoftables;
var i;
$scope.documentsList = new Array();
$scope.tableHeaders = new Array();
var promises = [];
for (i = 1; i <= $scope.count; i++) {
var tableNo = i;
$scope.getHttp(i).then(function(resp){
$scope.documentsList.push(resolutions[0]);
$scope.tableHeaders.push(resolutions[1]);
});
}
}
});
$scope.getHttp = function(tableNo){
var promise;
promise = $http({
url:'http://localhost:3000/doclist/' + tableNo,
method:'get'
});
promises.push(promise);
promise = $http({
url:'http://localhost:3000/tableColumns/' + tableNo,
method:'get'
});
promises.push(promise);
return $q.all(promises);
}
Make the changes accordingly. I did not test it because dont have complete controller.But for sure, if you are looping http, make sure promises are stored.
I want to fill a table with values using Javascript/Jquery.
I have a table with incrementing ids (td-1until td-42) and I want to fill this table using JQuery/Javascript.
Currently I am using this script, but I know the error $('#td-'+i) can't work, because the ID used is build wrong: $('#td-'12) is not a valid id.
Has someone a quick fix for this? I am stuck...
for (var i = 1; i < 43; i++) {
if (i < firstDay || i >= (howMany + firstDay)) {
$('#td-'+i).value("");
} else {
$('#td-'+i).value(i-firstDay);
}
}
Use text() and it worked.
var firstDay = 3, howMany = 1;
for (var i = 1; i < 7; i++) {
if (i < firstDay || i >= (howMany + firstDay)) {
$('#td-'+i).text("");
} else {
$('#td-'+i).text(i-firstDay);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='td-1'></td>
</tr>
<tr>
<td id='td-2'></td>
</tr>
<tr>
<td id='td-3'></td>
</tr>
<tr>
<td id='td-4'></td>
</tr>
<tr>
<td id='td-5'></td>
</tr>
<tr>
<td id='td-6'></td>
</tr>
</table>
First off, reconsider putting a large amount of IDs on elements for efficiency reasons, but putting that aside:
There's a convenience callback for .each() in jQuery, which accepts incremented (current) index and reference to element.
Depending on the DOM structure, you could do:
$('td', '#mytable').each(function(ix, tdel){
$(tdel).attr('id', 'td-' + ix).text(ix); // or $(this).attr...
});
...and see where it takes you to.
I know this question gets asked alot but i have tried all of the clickevents for but cant seem to get this to work i am trying to get a value or string from a td here is the table i build
<table id="tblMain">
<thead>
<tr>
<th>Parcel ID</th>
<th>Quick Ref ID</th>
<th>Address</th>
<th>Tax Unit</th>
<th>Style</th>
<th>Arch Style</th>
<th>Validity Code</th>
<th>Sale Price</th>
<th>Sale Date</th>
<th>Year Built</th>
<th>Total Living Area</th>
<th>Lot Area</th>
<th>Bedrooms</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="side-link">
<td class="parcelIDCell"><a id="Parcelid" /> #item.ParcelId </td>
<td>#item.QuickRefId</td>
<td>#item.Address</td>
<td>#item.TaxunitA</td>
<td>#item.StyleA</td>
<td>#item.ArchStyleA</td>
<td>#item.ValCode</td>
<td>#item.SalePriceA</td>
<td>#item.SaleDateA</td>
<td>#item.YearBuilt</td>
<td>#item.LivingArea</td>
<td>#item.LotArea</td>
<td>#item.BedroomA</td>
#*<td>#item.ParcelID</td>
<td>#item.PropertyID</td>*#
</tr>
}
</tbody>
i just want to retrieve the parcel Id from the first row depending on which one i click on
some java script i have tried
<script>
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () { getval(this); };
}
}
function getval(cel) {
alert(cel.innerHTML);
}
there is more but i deleted them
Any advice would be greatly appreciated
you want either an id or the string? You can do this:
$("td").click(function() {
if($(this).hasClass("parcelIDCell")){
var ID = $(this).find("a").attr("id");
alert("Id is: " + ID);
}else{
var String = $(this).text();
alert("Text is: " + String);
}
});
It checks to see if the td being clicked has the class parcelIDCell, if it does it will find the a tag inside it and pull the id. If the class does not exist, it will just grab the text instead. Fiddle below:
FIDDLE
With jQuery:
$("#tblMain td").click(function() {
if ($(this).hasClass('parcelIDCell') {
alert($(this).find('a').attr('id));
} else {
alert($(this).text());
}
});
Update: getting the parcel id or the text, depending on the class of the td.