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

2

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.

edited May 26, 2014 at 11:07

answered May 26, 2014 at 10:05

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anup Over a year ago

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.

gkalpak Over a year ago

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.

Anup Over a year ago

I want Archive as a Button...in ur result!

gkalpak Over a year ago

Please take a look at the answer (I updated the last fiddle).

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

1

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

answered May 26, 2014 at 9:54

Arvin

1,0243 gold badges15 silver badges34 bronze badges

2 Comments

Anup Over a year ago

Thanks for answer...can u put this in fiddle pls...as i was trying it in fiddle but doesn't shown any results..!

Arvin Over a year ago

@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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related