I have been struggling with a problem.
I have multidimensional array and i want to display it to table body.
so i tried to do it with map, however i can't ignore the top of map element, so it displays like nest data.
this is how the multidimensioanl array looks
['2022-05-04', '2022-05-04', '2022-05-04', '2022-05-04', '2022-05-04', '2022-05-04']
['10:11:52', '10:11:52', '10:11:53', '10:11:54', '10:11:55', '10:11:56']
['447', '442', '447', '442', '436', '433']
so i tried to let it looks easy like below.
<tbody>
<tr>
<td>{list[0][0]}</td>
<td>{list[1][0]}</td>
<td>{list[2][0]}</td>
</tr>
<tr>
<td>{list[0][1]}</td>
<td>{list[1][1]}</td>
<td>{list[2][1]}</td>
</tr>
<tr>
<td>{list[0][2]}</td>
<td>{list[1][2]}</td>
<td>{list[2][2]}</td>
</tr>
<tr>
<td>{list[0][3]}</td>
<td>{list[1][3]}</td>
<td>{list[2][3]}</td>
</tr>
<tr>
<td>{list[0][4]}</td>
<td>{list[1][4]}</td>
<td>{list[2][4]}</td>
</tr>
</tbody>
so i tried to use map instead of doing this
const tableData = list.map((data, index) =>
data.map((item, idx) => (
<tr>
<td>{listData[idx]}</td>
</tr>
))
);
return(
<tbody>
{tableData}
</tbody>
)
it doesn't look what i expected.
how can i solve this problem ??
"tr" tag length should be longest
but "td" tag length should be the multidimensioanl array length.
The data, as-is, isn't really suited to .map because you need to iterate over the list[x][y]s, where the x changes, but not the y. Turn the list into a structure where mapping will work first by essentially turning the multidimensional array on its side.
const tableData = list[0].map(
(_, i) => (
<tr>
{
list.map(
listItem => <td>{listItem[i]}</td>
)
}
</tr>
)
);
return (
<tbody>
{tableData}
</tbody>
)
Related
I want to dynamically call array values within rather than putting them as val1, .val2, .val3 as shown below.
<table>
<thead>
<tr>
{array_keys
.map((arr) => ( <th>{arr}</th> )
)}
</tr>
</thead>
<tbody>
{array
.map((list, key) =>
<tr key={key}>
<td>{list.val1}</td>
<td>{list.val2}</td>
<td>{list.val3}</td>
</tr>
)}
</tbody>
</table>
Above code works to get array keys in and array values in .
I want to fetch all values dynamically, something like:
<tbody>
{array
.map((list, key) =>
<tr key={key}>
{array_keys
.map((arr) => (
<td>{list.{arr}}</td>
)
)}
</tr>
)}
</tbody>
However {list.{arr}} is not an acceptable code in ReactJs. I need it because my array columns shall change, so I can't map static values and want them fetched dynamically in
according my code bellow how to correct way to append string outside loop when using map() method
this is my incorrect way when I try to concate <table><th>Emploeye Name</th><th>Salary</th></table> tag before and after call map() method
buildString(data){
return(//start return
<table class="table">
<th>Emploeye Name</th><th>Salary</th>
data.map((employeye) =>
<tr>
<td>{employeye.employee_name}</td>
<td>{employeye.employee_salary}</td>
</tr>
)
</table>
); //end return
}
for this mistake I get this message
./src/views/emploeyes/Employeyes.js
Line 27:20: 'employeye' is not defined no-undef
Line 28:20: 'employeye' is not defined no-undef
and this is correct way without concate anything before map() method
buildString(data){
return(
data.map((employeye) =>
<tr>
<td>{employeye.employee_name}</td>
<td>{employeye.employee_salary}</td>
</tr>
)
);
}
please helpme to fix that and explain me thank you.
According to the JSX, you must use {} on your code
buildString(data){
return(//start return
<table className="table">
<thead>
<th>Emploeye Name</th>
<th>Salary</th>
</thead>
<tbody>
{
data.map((employeye) => (
<tr>
<td>{employeye.employee_name}</td>
<td>{employeye.employee_salary}</td>
</tr>
))
}
</tbody>
</table>
);
}
I have programatically created the above table in React using, the below code:
tableRenderer() {
let table = <Table striped bordered hover responsive="sm" id='mytable'>
<thead>
<tr>
{this.state.headers.map((header, index) =>
<th key={index}>{header} </th>
)}
</tr>
</thead>
{this.state.timeLabels.map((label, index)=>
<tr key={index}> <td><b>{label} </b></td>
{this.state.table.slice(0,4).map((match, index)=>
<td key={index}>{match.teamA} vs {match.teamB}</td>
)}
</tr> )}
</Table>;
However I'm stuck on the last piece of functionality I need: How can I change the value of the slice of the table array, so on the first run it slices 0->number of pitches, second run number of pitches-> number of pitches+number of pitches... etc.
Do I need to create some sot of function that will iterate a variable every time a row is created?
It would be something along the lines of:
{this.state.timeLabels.map((label, index)=> {
const NO_OF_PITCHES = 4;
let from = NO_OF_PITCHES * index;
let to = NO_OF_PITCHES * (index + 1);
return <tr key={index}>
<td><b>{label}</b></td>
{this.state.table.slice(from,to).map((match, index)=>
<td key={index}>{match.teamA} vs {match.teamB}</td>
)}
</tr>)}
}
that's assuming the slicing is
0,4...
4,8...
8,12...
etc
also you could lift NO_OF_PITCHES to the parent of the map function because it doesn't have to be recreated on each iteration
sorry for the bad title.... I did not know how to name it.
I have a little problem. I have an array of Strings, and i want to cut this strings into smaller parts. I used a loop and the split method to do this. But split also returns an array.
What is the best way to store those returned arrays so that I can display it afterwards in a table in my html file?
I hope it will be more clear with my code snippet.
books: string[];
booksDetails: string[][];
...
...
for (var i = 0; i < books.length ; i++) {
var bookSplit = books[i].split(/(?:\/|-)+/);
this.booksDetails.push(bookSplit);
}
...
and then display it
<table>
<thead>
<tr>
<th>name</th>
<th>author</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of booksDetails; let i = index" [attr.data-index]="i">
<td>{{book[i][0]}}</td>
<td>{{book[i][1]}}</td>
<td>{{book[i][2]}}</td>
</tr>
</tbody>
</table>
You're halfway there, just nest another ngFor-loop on the <td> element:
...
<tr *ngFor="let book of booksDetails; let i = index" [attr.data-index]="i">
<td *ngFor="let detail of book; let j = index" [attr.data-index]="j">
{{detail}}
</td>
</tr>
...
Edit: You can also use Array.map() instead of the long and unnecessary for-loop:
this.booksDetails = this.books.map(b => b.split(/(?:\/|-)+/));
I have a HTML Table in my ReactJS app and I want to color specific cells or rows there. I have my array in state and want to check differences between neighbor rows and then show this differencies by coloring them on red.
class MainTable extends Component {
constructor(props) {
super(props);
this.state = {
results: []
};
}
render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
<div>
<div>
<Table hover striped bordered responsive size="sm">
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>ORIGIN</th>
</tr>
</thead>
<tbody>
{sorted.map(result =>
<tr>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
}
}
I have no idea how to do something like that. Maybe some idea? Sorry for noobie question, I'm new with ReactJS.
To mark some rows you can:
{sorted.map((result, index) =>
<tr className={`item-${index}`}>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
Basically you first need some criteria on which to mark your element, than you can apply a class or style to it. Helpful is classnames so you could do something like that:
{sorted.map((result, index) =>
<tr className={classnames({
even: index % 2 == 0,
odd: !(index % 2 == 0)
})}>
That would add either even or odd to the classes of the <row>, depending on the index in the list.
I guess there are only two things to remember are:
element styles need to objects like: { backgroundColor: #000 } and
css classes need to be added as »className« property
You can use something like
<tr style={{'background-color': result.color}}>...</tr>
or
<tr style={{'background-color': shouldHighlight[key] ? 'red' : 'white'}}>...</tr>
Obviously in second case you need to findout before function, which table rows should be highlighted and store it in the array.
Also, you need to write your map function in format (result, key) => ... or you need to know id of the result.
You can add a flag in each element of your array to indicate if you need to set the background color of your cell or not.
And then use it like this in your render method :
render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
<div>
<div>
<Table hover striped bordered responsive size="sm">
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>ORIGIN</th>
</tr>
</thead>
<tbody>
{sorted.map(result =>
<tr className={(result.colorFlag ? 'colored-background' : '')}>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
And of course, don't forget to create the CSS class
.colored-background {
background-color: #BADA55;
}