【问题标题】:Dynamic Knockout table from JSON objectJSON对象的动态淘汰表
【发布时间】:2013-03-12 08:26:18
【问题描述】:

我试图用淘汰赛集成填充表格。从 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"
      }
   ]
}

我使用敲除映射将数据动态映射到页面中。已在 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/

【问题讨论】:

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


    【解决方案1】:

    假设姓名、专业、性别的大小写变化不是实际要求,直接推送对象即可。

    data.push(element);
    

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

    【讨论】:

    • 它不工作。据我了解,数据必须作为 id:value 推送
    • 您正在推送一个对象,然后您将其定义为一组键值对。但是您已经有了一个带有键值对的对象。当你说它不起作用时,你是什么意思?
    • 错误:无法解析绑定。消息:ReferenceError:未定义专业;绑定值:text:majorajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.jsLine 56
    • @SreekeshOkky 我看了你的样本,但我不明白你的目标是什么。当你说它不起作用时你想做什么?
    • @SreekeshOkky 是的,那是因为它在元素上定义为 Major,而不是 Major。这就是为什么我在答案的第一行中包含免责声明。如果您希望任意属性名称起作用,您需要尝试查找您传递的相同名称,或者找到一致的规则来转换它们(就像所有小写一样)
    猜你喜欢
    • 1970-01-01
    • 2016-04-28
    • 2013-01-29
    • 2012-04-05
    • 2013-01-14
    • 1970-01-01
    • 2014-01-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多