I want to iterate over an array and make a table row with its elements.
The coinlist is an array of object containing coin symbol and price.
Is there any way to print table row with map function.
<tbody>
{coinlist.map((coin) => {
return {
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
} })}
</tbody>
<table>
<tr>
<th>Symbol</th>
<th>Price</th>
</tr>
{coinlist.map(coin)=>(
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
))}
</table>
If you want to print out the object fields which make up the table row you can either console.log the entire object which makes up the row or each individual field. Something along the lines of:
<tbody>
{coinlist.map((coin) => {
console.log(coin); // see the entire coin object
console.log(`symbol: ${coin.symbol} price: ${coin.price}`); // see individual fields of interest
return {
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
}
})}
</tbody>
Hopefully that helps
Related
I am trying to map an entry to the table. In that entry, there is a column which can have more than one value.In that case, a sub-row will be created in the same row. I have attached an example below image. Here is the code I have tried which messes the table up completely.
{intake.map((value) => {
return (
<tr>
<th className="text-center" scope="row">{value}</th>
</tr>
)
})}
{attendanceIds.map((val, i) => {
return (
<tr>
<td className="text-center">{date[i]}</td>
<td className="text-center">{duration[i]}</td>
<td className="text-center">{module[i]}</td>
<td className="text-center">{start[i]}</td>
<td className="text-center">{topic[i]}</td>
<td className="text-center">{studentsPresent[i]}</td>
<td className="text-center">{totalStudents[i]}</td>
<td className="text-center"><button className="button" id={val}>Details</button></td>
</tr>
)
})}
This is what I desire to get
This is what I get from the code above
This is the data I have. (One attendance ID has multiple intakes)
The data looks like it belongs on the same row semantically, so you shouldn't use a new row, you should add your multiple entries as e.g. div (or whatever suits) in your <td>. Then use CSS to style as required.
From your question, it isn't entirely clear what your data structure is in your component, but assuming your attendanceIds map in the way that your image shows, you can do something like this:
{attendanceIds.map((val, i) => {
return (
<tr>
<td className="text-center">{
val.intake.length === 1
? {val.intake[0]}
: val.intake.map(item=>
<div>{item}</div>)
}
}</td>
// add the rest of the <td>s here
</tr>
)
})}
(Note that I've left the rest of the mapping up to you as the way you've done it isn't clear to me.)
I have data being sent from my backend to my frontend and then the data is parsed and displayed into a table. However, at it's max amount of elements in the array, there are too many rows in the table and it exceeds the area that I need the table to be in. So a carousel/slide animation would be the best bet and I want to be able to display elements 4 rows at a time and then invoke the slide animation the the next 4. I'm not quite sure how to do this in the current iteration of my function that sets the table data.
Can someone point me in the right direction?
function FormTable(props){
/**
* props = allStations
*/
console.log(props.data)
return(
<table className="form__table">
<div className="form__table-parentDiv">
<thead>
<tr>
<th className="form__table-header">Departing Station</th>
<th className="form__table-header">Arriving Station</th>
<th colSpan={2} className="form__table-header">Departure Time</th>
</tr>
</thead>
<tbody>
{
props.data.map( (stationIndex) => {
// console.log(stationIndex);
let cells = [];
for(let i = 1; i < stationIndex.length; i++){
cells.push(
<React.Fragment>
<td className="form__table-stations"> {stationIndex[i].station} </td>
<td className="form__table-stations"> {stationIndex[i].destination} </td>
<td className="form__table-arrivals"> {stationIndex[i].firstArrival} </td>
<td className="form__table-arrivals"> {stationIndex[i].secondArrival} </td>
</React.Fragment>
);
}
return <tr className="form__table-row" >{ cells }</tr>
})
}
</tbody>
</div>
</table>
)
}
Every time the toggle is clicked, all payments are getting replaced with new payments. My problem is how to maintain the payments of a particular index of every click and show at respective index. please help me out
here is my html
<tbody data-ng-repeat="invoice in relatedInvoices>
<tr>
<td class="td-bottom-border">
{{invoice.PayableCurrencyCode}} {{invoice.PayablePaidAmount | number: 2}}<br />
<small>
<a data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(invoice.PayableInvoiceId)">Paid</a>
</small>
</td>
</tr>
<tr data-ng-show="isOpenPayablePayments[$index]">
<td>
<table>
<thead>
<tr>
<th>Transaction Id</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="payment in payablePayments">
<td>{{payment.TransactionId}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Here is my javascript
var getPayments = function (invoiceId) {
paymentService.getPayments(invoiceId).then(function (paymentsResponse) {
return paymentsResponse.data;
});
};
$scope.togglePayablePayments = function(invoiceId) {
$scope.payablePayments = getPayments(invoiceId);
};
If I understood correctly, you want to have "payablePayments" for every invoice.
This is working: http://plnkr.co/edit/cj3jxZ?p=info
Try something like
// init at beginning
$scope.payablePayments = [];
$scope.togglePayablePayments = function(invoiceId) {
$scope.payablePayments[invoiceId] = getPayments(invoiceId);
};
and then
<tr data-ng-repeat="payment in payablePayments[invoice.PayableInvoiceId]">
Otherwise you overwrite the object for the preceding invoice.
I have two javascript objects, the contents of which came from these two HTML tables.
Each pre-merge table now has it's own object. The object is structured as follows:
The first array element within the object contains the column headers from the pre-merge tables, and the array elements following that contain the <tr> data from each table.
Is it possible to merge these two objects together to produce one HTML table? As you can see the in the pre-merge tables the x-value is shared between both, meaning it is common between the two objects too. I thought there may be a way of comparing these values, and then populating the table, but I'm not sure how.
I would like the merged table to look like the following:
x-value: common dates shared between objects
columns: data from each of the pre-merge tables with their headers
Here is my code (you can also see it on this CodePenHere):
$(document).ready(function(){
gatherData();
results();
});
function gatherData(){
data = [];
tables = $('.before').find('table');
$(tables).each(function(index){
table = [];
var headers = $(this).find('tr:first');
var headerText = [];
headerText.push($(headers).find('td:nth-child(1)').text());
headerText.push($(headers).find('td:nth-child(2)').text());
table.push(headerText)
$(this).find('tr').each(function(index){
var rowContent = [];
if (index != 0){
$(this).find('td').each(function(index){
rowContent.push($(this).text());
})
}
table.push(rowContent)
})
data.push({table: table})
});
console.log(data)
}
function results(){
var results = $('.after1').find('thead');
$(results).append("<th>" + data[0].table[0][0] + "</th>");
for (i in data){
$(results).append("<th>" + data[i].table[0][1] + "</th>");
var b = data[i].table.length;
for (a = 2; a < b; a++){
console.log(data[i].table[a][0] + " || " + data[i].table[a][1])
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h1 class="page-header">Formatter.js</h1>
</div>
<div class="container before">
<h3>Before</h3>
<table border=1 cellspacing=0 cellpadding=0 alignment="" class="a" id="3">
<tbody>
<tr>
<td>x-value</td>
<td>Operational Planned</td>
</tr>
<tr>
<td>09/11/2015</td>
<td>0</td>
</tr>
<tr>
<td>10/11/2015</td>
<td>0</td>
</tr>
<tr>
<td>11/11/2015</td>
<td>66358</td>
</tr>
<tr>
<td>12/11/2015</td>
<td>65990</td>
</tr>
<tr>
<td>13/11/2015</td>
<td>55993</td>
</tr>
<tr>
<td>14/11/2015</td>
<td>0</td>
</tr>
<tr>
<td>15/11/2015</td>
<td>0</td>
</tr>
</tbody>
</table>
<table border=1 cellspacing=0 cellpadding=0 alignment="" class="a" id="3">
<tbody>
<tr>
<td>x-value</td>
<td>Something Else</td>
</tr>
<tr>
<td>09/11/2015</td>
<td>0</td>
</tr>
<tr>
<td>10/11/2015</td>
<td>0</td>
</tr>
<tr>
<td>11/11/2015</td>
<td>2552</td>
</tr>
<tr>
<td>12/11/2015</td>
<td>86234</td>
</tr>
<tr>
<td>13/11/2015</td>
<td>33623</td>
</tr>
<tr>
<td>14/11/2015</td>
<td>0</td>
</tr>
<tr>
<td>15/11/2015</td>
<td>0</td>
</tr>
</tbody>
</table>
<hr>
</div>
<div class="container after">
<h3>After</h3>
<table class="table after1">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
As I understand your issue, you want to merge the tables by the key values in coloumn x-value.
Here is how I would do it:
Collect data from each table into a dictionary with coloumn x-value as key
Save values for each key as array.
The main part is collecting the data in the dictionary. Here is the part:
var table = {
header: [],
data: {}
};
$(this).find('tr').each(function(index) {
// ignore first row
if (index === 0) return true;
// read all data for row
var rowData = [];
$(this).find('td').each(function() {
var value = $(this).text();
rowData.push(value);
});
// key value for dictionery
var key = rowData[0];
// add value to array in dictionary if existing or create array
if(table.data[key]) {
table.data[key].push(rowData[1]);
} else {
table.data[key] = [rowData[1]];
}
});
By using a simple javascript object as a dictionary we create properties on the fly, just like a dictionary.
See the plunker for the full script. I've written comments on the different parts to make the functionality clear. Let me know if anything is unclear.
As a note on your code. You can use multiple arguments in the jQuery selector to make your selections simpler, so this (see note below)
tables = $('.before').find('table');
can become this:
tables = $('.before table');
Edit
As noted by Mark Schultheiss in the comments, the later, but shorter syntax for jQuery selectors can be slower than the first one on large DOMs. So use the extended syntax on large DOMs. I've updated the plunker to use the better performing syntax.
Why doesn't this simple table structure work in angularjs? None of the rows gets populated with the data. If I replace span with tr, it works fine but my third column of Percent doesn't fit in well.
<table class="table table-hover">
<tbody>
<tr>
<th>Grade</th>
<th>Point</th>
<th>Percent</th>
</tr>
<tr>
<span ng-repeat="gdata in gradepoints">
<td ng-repeat="(grade, gp) in gdata"> {{grade | uppercase}} </td>
<td ng-repeat="(grade, gp) in gdata"> {{gp}} </td>
</span>
<span ng-repeat="pdata in percents">
<td ng-repeat="(grade, perc) in pdata"> {{perc}} </td>
</span>
</tr>
</tbody>
</table>
Try this:
<tr ng-repeat="gdata in gradepoints">
<td>{{gdata.grade | uppercase}}</td>
<td>{{gdata.gp}}</td>
<td>{{pdata[$index].perc</td>
</tr>
You want one row for each element in the gdata array, so the ng-repeat needs to be on the <tr> element. If the two arrays aren't in sync, you can create a function in your controller to return the pdata element you need:
$scope.findPdata(gdata, index) {
// ... do your magic here to find the pdata element you want
return result;
}
<td>{{findPdata(gdata, $index)}}</td>
guessing from the below:
<tr>
<th>Grade</th>
<th>Point</th>
<th>Percent</th>
</tr>
i guess your table has 3 columns so your each row has 3 columns?
in that case use the following
<tr ng-repeat="gdata in gradepoints">
<td>{{gdata.grade | uppercase}}</td>
<td>{{gdata.gp}}</td>
<td>{{gdata.percent}}</td>
</tr>
for above to work your gradepoints must be an ARRAY containing objects with 3 properties each i.e. grade,gp,percent