Hack Forums
Baffled with creating HTML table in particular order with loops - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: Baffled with creating HTML table in particular order with loops (/showthread.php?tid=6250305)

Baffled with creating HTML table in particular order with loops - .eXe - Aug 27, 2023

Hear me out before you laugh...

I have some JSON that will look like this:

Code
{
  "1": {
    "tileRef": 1,
    "cpuVersion": "47C8",
    "fpgaVersion": "5C04",
    "fanSpeed": 0,
    "temperature": 24,
    "fps": 60,
    "status": "OK"
  },

There will be up to 72 of these in a single JSON payload.

I need to create a 12x6 grid that will hold this data. HOWEVER, the order needs to start from the bottom left, for example:


6 | 7 | 18 | 19 | 30 | 31 | 42 | 43 | 54 | 55 | 66 | 67
5 | 8 | 17 | 20 | 29 | 32 | 41 | 44 | 53 | 56 | 65 | 68
4 | 9 | 16 | 21 | 28 | 33 | 40 | 45 | 52 | 57 | 64 | 69
3 | 10 | 15 | 22 | 27 | 34 | 39 | 46 | 51 | 58 | 63 | 70
2 | 11 | 14 | 23 | 26 | 35 | 38 | 47 | 50 | 59 | 62 | 71
1 | 12 | 13 | 24 | 25 | 36 | 37 | 48 | 49 | 60 | 61 | 72

I'm using for loops to create the grid, but what about getting the data in the right place?

RE: Baffled with creating HTML table in particular order with loops - Nachfolger - Aug 28, 2023

There's going to be a ton of ways you could approach this. One way that came to mind is to chunk split the array into slices of 6 then reverse the chunk (or iterate backwards)

You don't state the language you're working with, and some come with the function natively (e.g. PHP). Here's a chunk split example with JavaScript:

Code
const dataset = []; // TODO: replace with your data
const chunked = [];
for (let i = 0; i < dataset.length; i += 6) {
    chunked.push(dataset.slice(i, i + 6));
}

https://stackoverflow.com/a/8495740

Then iterate through each chunk:

Code
chunked.forEach((chunk) => {
  (chunk.reverse()).forEach((e) => console.log(e)); // TODO: build the table
});

EDIT: I didn't realize it swapped order in each row. You can just conditionally reverse the array depending on the index of the chunk.

e.g.

Code
chunked.forEach((chunk, idx) => {
  if (idx % 2 !== 0) {
    // reverse
  }

  // build table
});