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 but I don't want to use coffeescript.

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.

• javascript
• json
• angularjs
• angularjs-ng-repeat

• you should make your Json valid first. – U r s u s Commented Sep 10, 2015 at 11:22
• I have shown the first 3 items in JSON.They are correct.. – forgottofly Commented Sep 10, 2015 at 11:29
• 1 Not according to this chris.photobooks./json/default.htm – U r s u s Commented Sep 10, 2015 at 11:31
• 1 Property names should be encapsulated in double quotes for valid JSON. – ste2425 Commented Sep 10, 2015 at 11:48
• Anyway your json format the way it is can't be used for what you need. It should be in a different format if you want the table to be dynamic (not dependant to the data) – Diana R Commented Sep 10, 2015 at 12:25

3 Answers 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
  }]
}]

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>

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./a/35566132/5076414