Dynamic Array in table HTML

Question

I have an Array which i need to convert it into Table format to be displayed in HTML.

    <table>
        <tr>
            <th ng-repeat='(key, value) in data[0]'>{{key}}</th>
        </tr>
        <tr ng-repeat="(key,value) in data">
            <td ng-repeat="item in data[key]" ng-if="$index!=0">{{item}}</td>

        </tr>
    </table>

var data = [{
    "recordno": "001",
        "firstname": "Brock",
        "middlename": "Edward",
        "lastname": "Lesnar",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}, {
    "recordno": "002",
        "firstname": "John",
        "middlename": "E",
        "lastname": "Cena",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}];

function TableController($scope) {
    $scope.data = data;
}

I am facing with 2 issues :-

Array in table automatically gets sorted. I want to display records as they are in Array.
I want to show Status values to be shown as button & when clicked on btn it calls ng-click.

What is the right way to do this?

Is there any other way to do this. Because Array is Dynamically passed.

What is the array sorted by? It looks already sorted in the example you gave, could you improve the example? — Sam P
– Sam P, Commented May 26, 2014 at 9:42
It is sorted alphabetically...i don't want it to be sorted...i want my columns to be like this :- record no, firstname, middlename, lastname, etc...as they are in Array... — Anup
– Anup, Commented May 26, 2014 at 9:43

gkalpak · Accepted Answer · 2014-05-26 11:07:59Z

Since different browsers have different conventions about sorting keys of (non-Array) objects, I suggest you have an additional array of column-names to be sure your values will always be rendered as expected (in all browsers).

Then you can use a filter to convert any item (in data) to an array based on the order specified in the columns array.

The implementation might look like this:

var columns = [...];
var data = [...];

.controller('TableController', function ($scope) {
    $scope.columns = columns;
    $scope.data = data;
})

.filter('sortByColumn', function () {
    return function (obj, columns) {
        var item = [];
        angular.forEach(columns, function (col) {
            item.push(obj[col]);
        });
        return item;
    };
});

Then, you can modify your HTML like this:

<table>
    <tr><th ng-repeat="col in columns">{{col}}</th></tr>
    <tr ng-repeat="item in data">
        <td ng-repeat="val in item | sortByColumn:columns">{{val}}</td>
    </tr>
</table>

See, also, this short demo.

UPDATE:

Or, see this other short demo featuring a button.

This is working nicely...How to solve my 2nd issue...i want to show status as button & call ng-click & call a method which passes id as argument.
Sorry, but it is not quite clear (to me) what exaclty you want. Take a look at my updated answer and let me know if it helps.
Please take a look at the answer (I updated the last fiddle).

Arvin · Accepted Answer · 2014-05-26 09:54:21Z

I am using a function like below

function RepeatData(TemplateString, JSONValue, JOSNFields, Parent, Options) {
        var settings = $.extend({ "OnItemBound": null, "Delimiter": "" }, Options);
        for (var i = 0; i < JSONValue.length; i++) {
            var rowValue = TemplateString;
            for (var j = 0; j < JOSNFields.length; j++) {
                rowValue = rowValue.replace(new RegExp(settings.Delimiter + JOSNFields[j] + settings.Delimiter, 'g'), JSONValue[i][JOSNFields[j]]);
            }
            var rowElement = $(rowValue);
            if (settings.OnItemBound)
                settings.OnItemBound(rowElement, JSONValue[i]);
            Parent.append(rowElement);
        }
}

and you need to call this function like this Suppose my data is

var dataExample = [{
    "recordno": "001",
        "firstname": "Brock",
        "middlename": "Edward",
}, {
    "recordno": "002",
        "firstname": "John",
        "middlename": "E",
}];

then

RepeatData("<tr><td>#firstname#</td><td>#middlename#</td></tr>",dataExample,['firstname','middlename'],$("#divTableContainer").find("tbody"),{ "OnItemBound": function (rowElement, rowData) { AddSelectionProperty(rowElement, rowData) }, "Delimiter": "#" });

Not sure that this will meet your needs, but this would help you

Thanks for answer...can u put this in fiddle pls...as i was trying it in fiddle but doesn't shown any results..!
@Anup sorry this is not working in jsfiddle,But im using this in my current project in VisualStudio 2010 with Jquery 1.10.1. I dont have knowledge in angular js

Collectives™ on Stack Overflow

Dynamic Array in table HTML

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related