javascript - 来自 JSON 对象的动态 Knockout 表

Question

我试图用 knockout 整合来填充表格。从 Json 获取数据。

JSON 数据

{
   "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"
      }
   ]
}

我使用 knockout-mapping 将数据动态映射到页面中。已将其作为 Javascript 添加到 JS-bin 中。我的脚本在示例的html页面中

$(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);
    }
});

我要替换

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

进入动态脚本 这样我添加的任何 json 数据都将以表格格式显示。即使它的列名或列号发生变化。

有人知道怎么做吗？

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

Answer 1

假设姓名、专业和性别的大小写变化不是实际需求，您可以直接推送对象。

data.push(element);

您基本上是逐个创建元素的副本并推送它，为什么不直接推送元素本身呢？