To end up working the row “manually” I did like this
tableContent.forEach(tuple => {
let row = document.createElement(‘tr’);
let cell = document.createElement(‘td’);
let textNode = document.createTextNode(tuple.target);
cell.appendChild(textNode);
row.appendChild(cell);
let cell2 = document.createElement(‘td’);
let textNode2 = document.createTextNode(tuple.lower);
cell2.appendChild(textNode2);
row.appendChild(cell2);
let cell3 = document.createElement(‘td’);
[…]
[cell iteration attempt 1] I’ve started by using the base code and trying to get the ID or label or whatever the array column is, which in the original the 1st 2 are name & age and in mine target & lower and I couldn’t manage to do so but if I did it would have been something like
Object.values(tuple).forEach(data => {
[…]
if (data.ID == “lower”) { let cell2 = […] }
so sometimes it would have worked exactly like the base code and others it would have inserted a 2nd cell (along with the current cell).
[cell iteration attempt 2] Today I tried something else, and it failed but it would have been perfect if it worked, I tried
which with the previous paragraph [cell iteration attempt 1], the condition if (data.ID == “lower”) would have inserted for 2nd cell content Math.round(tuple.lower).
Is there a way to have either of the 2 previous paragraph potential solutions work [since I had to add EoLs to make the codeblocks work properly, those paragraphs now doesn’t look like ones so I labeled each as: cell iteration attempt #] ? I’m especially interested in the 2nd (right above) ?
Ok, your explanation is a bit confusing as you are riffing with a bunch of ideas, but a few questions.
First, is your tuple data all the same number of values? As in, are all rows (tuples in your case) contain the same number of items (all have 2 values)?
Second, if they are all the same size and have the same names (target and lower) what is with the if statement checking if the ID is “lower”? Just iterate through your data, pass the “target” and “lower” values to a function you create (which creates the row and its 2 cells) and append that to your table.
Look at your “manual” piece of code. See how you are essentially doing the same thing for each row and its cells? The only thing changing is your variables. That should be a clue that you are repeating yourself and thus can be extracted out into its own function and called on from a loop. Passing only the data (your target and lower values) and have it do the building of a single row and return it.
I hope you get the idea.
// Loop through our data, pass each target and lower value to create_row.
Object.values(tuple).forEach(data => {
some_table.appendChild(create_row(data.target, data.lower));
});
// Builds a row by calling create_cell for each of the two values.
function create_row(target_val, lower_val) {
let row = document.createElement('tr');
row.appendChild(create_cell(target_val));
row.appendChild(create_cell(lower_val));
return row;
}
// Builds a single cell and returns that to create_row
function create_cell(some_val) {
let cell = document.createElement('td');
let textNode = document.createTextNode(some_val);
cell.appendChild(textNode);
return cell;
}
Now keep in mind that the top code here is all just off the top of my head and is only meant to give you a general idea of how you might automate building these rows. Obviously they can be tweaked to take more values etc. The idea here is that for each data row, we create a row which in turn calls a function to create each cell. Their return value is appended to the row and the row is appended to the table. Notice how we are not repeating everything.
I think the most important part to clarify is that indeed, both the array and the table have the same amount of columns/fields in each respectively, both don’t match but in each it’s the same.
Please notice in the paragraph labeled cell iteration attempt 1 that there would be something created that is not contained in the array, so in the end-result table we give as sub-header for the 2nd & 3rd columns as “2nd array content” & “from 2nd array content” (so table col 4 would be "3rd array content). I am not able to do such condition ( if (data.ID == “lower”) { let cell2 = […] } ), maybe something like this exist, maybe it doesn’t, I mentioned I wasn’t able to find out how to in that paragraph. I’m not trying to “say” you should have know after reading, but that that I already tried to explain.
Maybe your code or explanation made mention or it but I was not able to find out how I can do a condition to find out which part of the array is currently iterated. I do now realize how I could take
I’m assuming unless something prevent me from using this modification from your code sample that this topic is solved, but I’m really curious about the previous paragraph of this post.
