Advice on creating a matrix table in angular JS

Question

Below is my JSON object(partial) which I would like to show as a matrix table preferably using ng-repeat:

[
    {
        "product": "milk",
        "resource": "a",
        "checked": true
    },
    {
        "product": "bread",
        "resource": "a",
        "checked": false
    },
    {
        "product": "butter",
        "resource": "a",
        "checked": true
    }
]

I have tried http://plnkr.co/edit/iW1dZV?p=info but I don't want to use coffeescript.

Answer 1

Although this is not the exact solution for your problem, I hope this will give you idea of what needs to be done. I am printing the array based on sequence but you can change the condition easily.

Convert an array into a matrix/ grid

I have an array which i wanted to convert into a grid/matrix of column size 4. the following implementation worked for me. You can use the two counters : row and col as you like in side the nested ng-repeat

In my case number of columns is 3. But you can replace that 3 with a variable everywhere. h.seats is my array of the objects and i want to print either X or - based on value of element in that array

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th> prints the header row with column number at the top. getNumber(h.seats.length, 3) returns me the number of rows of that table as follows

.controller('CustomViewController', function ($scope, Principal, $state) {

    $scope.getNumber = function(length, columns) {
        return new Array(parseInt(length / columns + 1, 10));   
    }

The line ng-if="col >= (row)*3 && col < (row+1)*3" is important logic to calculate which elements should be put in that row. The output looks like below

0  1  2  3 
1  e1 e2 e3 
2  e4 e5 e6 
3  e7 e8 

Refer to following link for details of how row and col counters are used: https://stackoverflow.com/a/35566132/5076414

Answer 2

No ng, but plain javascript.

Basically you need a function which returns the checked property of the array with the given properties. This function iterates over the elements until the property values are matched.

The second part is to generate the table, which should be easier in ng, as I think.

function isChecked(product, resource) {
    return data.some(function (a) {
        if (a.product === product && a.resource === resource) {
            return a.checked;
        }
    });
}

var data = [
        {
            "product": "milk",
            "resource": "a",
            "checked": true
        },
        {
            "product": "bread",
            "resource": "a",
            "checked": false
        },
        {
            "product": "butter",
            "resource": "a",
            "checked": true
        }
    ],
    cols = ['milk', 'bread', 'butter', 'cheese', 'jam'],
    rows = ['a', 'b', 'c'],
    table = document.createElement("table"),
    tr = document.createElement("tr"),
    th = document.createElement("th"),
    td;

th.innerHTML = ' ';
tr.appendChild(th);
cols.forEach(function (c, j) {
    th = document.createElement("th");
    th.innerHTML = c;
    tr.appendChild(th);
});
table.appendChild(tr);
rows.forEach(function (r, i) {
    tr = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = r;
    tr.appendChild(td);
    cols.forEach(function (c, j) {
        td = document.createElement("td");
        td.innerHTML = +isChecked(c, r);
        tr.appendChild(td);
    });
    table.appendChild(tr);
});
document.getElementById('table').appendChild(table);

<div id="table"></div>

Answer 3

@forgottofly here is an example of better json for what you need:

[{
  "resource": "a",
  products: [{
    "product": "milk",
    "checked": true
  }, {
    "product": "bread",
    "checked": false
  }, {
    "product": "butter",
    "checked": true
  }]
}, {
  "resource": "b",
  products: [{
    "product": "milk",
    "checked": false
  }, {
    "product": "bread",
    "checked": true
  }, {
    "product": "butter",
    "checked": true
  }]
}, {
  "resource": "c",
  products: [{
    "product": "milk",
    "checked": false
  }, {
    "product": "bread",
    "checked": true
  }, {
    "product": "butter",
    "checked": true
  }]
}]