JSON对象的动态Knockout表

时间:2013-03-22 13:04:29

标签: javascript jquery json knockout.js knockout-mapping-plugin

我试图用淘汰赛整合来填充表格。这需要从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"
      }
   ]
}

我使用knockout-mapping将数据动态映射到页面中。这已经在JS-bin中添加为Javascript。我的脚本在示例的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/

1 个答案:

答案 0 :(得分:2)

假设姓名,专业和性别的变化不是实际要求,您可以按下该对象。

data.push(element);

因为你基本上是一块一块地创建元素的副本并推动它,为什么不直接推动元素呢?