2013-03-22 57 views
1

我正在尝试使用挖空集成来填充表。这从Json获取数据。来自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" 
     } 
    ] 
} 

我用敲除映射到数据动态地映射到页面中。这已被添加为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/

回答

2

假设的名字,专业和性别的情况下,变化不是一个实际的需求,你可以推对象。

data.push(element); 

正如你基本上一块一块地创建元素的副本并推动它,为什么不只是推动元素本身?

+0

这不起作用。据我所知,数据必须推送为id:value – Okky 2013-03-22 13:21:12

+0

您推送一个对象,您正在定义为一组键值对。但是你已经有了一个关键值对的对象。当你说它不工作时,你的意思是什么? – 2013-03-22 13:23:49

+0

试试我的js-bin示例。它根本不起作用。 – Okky 2013-03-22 13:25:49