Dynamic Knockout table from JSON object

Question

I was trying to populate a table with knockout integration. That takes data from Json.

JSON DATA

{
   "info":[
      {
         "Name":"Noob Here",
         "Major":"Language",
         "Sex":"Male",
         "English":"15",
         "Japanese":"5",
         "Calculus":"0",
         "Geometry":"20"
      },
      {
         "Name":"Noob Here",
         "Major":"Calculus",
         "Sex":"Female",
         "English":"0.5",
         "Japanese":"40",
         "Calculus":"20",
         "Geometry":"05"
      }
   ]
}

I used knockout-mapping to dynamically map the data into the page. That has been added as Javascript in JS-bin. My script is in the sample's html page

$(document).ready(function () {
    $("#div1").append("<tr><td data-bind='text: name'></td><td data-bind='text: major'></td><td data-bind='text: sex'></td><td><input data-bind='value: English' /></td><td><input data-bind='value: Japanese' /></td><td><input data-bind='value: Calculus' /></td><td><input data-bind='value: Geometry' /></td></tr>");

    function loadData(fileName) {
        var data = {
            "info": [{
                "Name": "Noob Here",
                    "Major": "Language",
                    "Sex": "Male",
                    "English": "15",
                    "Japanese": "5",
                    "Calculus": "0",
                    "Geometry": "20"
            }, {
                "Name": "Noob Here",
                    "Major": "Calculus",
                    "Sex": "Female",
                    "English": "0.5",
                    "Japanese": "40",
                    "Calculus": "20",
                    "Geometry": "05"
            }]
        }

        return (data);
    }

    var dataFunction = function () {
        this.Items = ko.observableArray([]);
    };

    var myFile = "Data";
    var data = [];

    var data1 = {
        "info": [{
            "Name": "Noob Here",
                "Major": "Language",
                "Sex": "Male",
                "English": "15",
                "Japanese": "5",
                "Calculus": "0",
                "Geometry": "20"
        }, {
            "Name": "Noob Here",
                "Major": "Calculus",
                "Sex": "Female",
                "English": "0.5",
                "Japanese": "40",
                "Calculus": "20",
                "Geometry": "05"
        }]
    }
    if (data1 && data1.info) {
        console.log(data1.info[0]);
        $.each(data1.info[0], function (key, value) {

        });

        $.each(data1.info, function (index, element) {
            data.push({
                English: element.English,
                Japanese: element.Japanese,
                Calculus: element.Calculus,
                Geometry: element.Geometry,
                name: element.Name,
                major: element.Major,
                sex: element.Sex
            });
        });
        dataFunction.prototype = function () {
            var getAllItems = function () {
                var self = this;
                ko.mapping.fromJS(data, {}, self.Items);
            };
            var finalObj = {};
            var info = [];
            $.each(data1.info, function (i, v) {
                var object = {};
                $.each(v, function (i1, val1) {
                    if ($.isNumeric(val1)) {

                        object[i1] = val1
                    }
                });
                info.push(object);
            });
            finalObj['info'] = info;
            console.log(finalObj);
            return {
                getAllItems: getAllItems
            }
        }();
        var dataList = new dataFunction();
        dataList.getAllItems();

        ko.applyBindings(dataList);
    }
});

I want to replace

data.push({
                English: element.English,
                Japanese: element.Japanese,
                Calculus: element.Calculus,
                Geometry: element.Geometry,
                name: element.Name,
                major: element.Major,
                sex: element.Sex
            });

Into a dynamic script so that what ever json data i add will be shown in the table format. Even if its column name or column number changes.

Does anyone know how to do it?

http://jsbin.com/ipeseq/1/

Ben McCormick Ben McCormick · Accepted Answer · 2013-03-22T13:15:27

Assuming that the change in case for name, major and sex is not an actual requirement, you can just push the object.

data.push(element);

As is you're basically creating a copy of the element piece by piece and pushing that, why not just push the element itself?

Dynamic Knockout table from JSON object

1 Answers