Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

Baffled with creating HTML table in particular order with loops

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?
aint my sig design skills sick?
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
});

Je t'aime
[Image: fpZ5a5g.png]

(Apr 22, 2022 04:39 PM)-Scrub Wrote:  Jokes on you, I'm not smart enough to know what he's talking about.


Possibly Related Threads...
Thread / Author Replies Views Last Post
[Javascript]  by flexing_99Apr 29, 2023 12:02 AM 3 270 Apr 29, 2023 12:02 AM
Last Post: Zgh600
[Javascript]  by flexing_99Jul 4, 2020 04:11 PM 0 131 Jul 4, 2020 04:11 PM
Last Post: flexing_99
[Javascript]  by AreWeRealApr 6, 2020 02:22 AM 5 216 Apr 6, 2020 02:22 AM
Last Post: AreWeReal