How can I get an array of values or rows from my grid layout?

Question

I'm trying to convert my CSS-grid into a CSV. I found this thread showing how to form the data if I can get it into an array format: How to export JavaScript array info to csv (on client side)?.

Is there a way to select all of the div values in the grid table as an array? Or even better create an array of row arrays

.grid-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

<div class="grid-table">
  <div>head1</div>
  <div>head2</div>
  <div>head3</div>
  <div>head4</div>
  <div>head5</div>
  <div>item1</div>
  <div>item2</div>
  <div>item3</div>
  <div>item4</div>
  <div>item5</div>
  <div>item6</div>
  <div>item7</div>
  <div>item8</div>
  <div>item9</div>
</div>

You state that this is a 'table', yet it's a set of `div` elements. If the output is actual tabular data, which makes sense if you want to export it to CSV, then use an actual `table` element. Are you expecting the rows/columns shown in the UI to be included as a 2D array in the output? Also, please show us what you've tried in order to solve this yourself. — Rory McCrossan, Jul 20 '22 at 08:25
Would it ok to add classes for heads and items ? Or at least could we know the number or columns in advance and assume that the n first divs are heads and the rest are items ? — Cedric Cholley, Jul 20 '22 at 08:29
yes the head elements do have a class but you can assume the first 5 are heads. I was thinking if I can get an array of all the values I can run it through a loop using mod 5 and form the rows that way — Elbusta, Jul 20 '22 at 08:34
You can use [`map()`](https://api.jquery.com/table) to get an 1D array of the values, then chunk it using [something like this](https://stackoverflow.com/q/8495687/519413) to get your 5xN 2D array. I'd still strongly suggest you use a `table` in your HTML for this though, as it makes far more sense in both terms of the UI and the JS to build the CSV. — Rory McCrossan, Jul 20 '22 at 08:37

valenjeb · Accepted Answer · 2022-07-20T09:25:33.890

You can grab all the items using querySelectorAll and use getComputedStyle to count the number of columns in each row. see this answer

var computedStyle = getComputedStyle(document.querySelector('.grid-table'))
var columnsCount = computedStyle.getPropertyValue("grid-template-columns").split(" ").length // in our case 5

var container = document.querySelector('.grid-table')
var columns = getComputedStyle(container).getPropertyValue("grid-template-columns").split(" ").length;

var items = document.querySelectorAll('.grid-table div');

var output = []
var row = 0;

items.forEach(function (item, i) {
    if (i % columns === 0) {
        if (output.length > 0) {
            row++ ;
        }
            
        output.push([])
    } 
        
    output[row].push(item.innerHTML)
      
});

console.log(output)

.grid-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

<div class="grid-table">
<div>head1</div>
<div>head2</div>
<div>head3</div>
<div>head4</div>
<div>head5</div>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
<div>item7</div>
<div>item8</div>
<div>item9</div>
</div>

score 1 · Answer 2 · answered Dec 11 '22 at 01:22

function getGridArray(rows, columns){
    let gridLocations = [];
    for(let i = 1; i <= rows; i++){
        for(let j = 1; j <= columns; j++){
            let position = {x:i, y:j};
            gridLocations.push(position);
        };
    };
    return gridLocations;
};

All you do is plug the number of rows and columns from your grid into this function. No variables needed. And since it returns an array it's easily chainable.

How can I get an array of values or rows from my grid layout?

2 Answers2