JSON 객체의 동적 녹아웃 테이블

Question

녹아웃 통합으로 테이블을 채우려고했습니다. 그것은 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로 추가되었습니다. 내 스크립트 내가 그렇게 내가 추가하는 것이 무엇인지 어느 JSON 데이터를 테이블 형식으로 표시됩니다 동적 스크립트 속으로

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

을 대체 할

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

샘플의 html 페이지에 있습니다. 열 이름 또는 열 번호가 변경되는 경우에도 마찬가지입니다.

누구나 방법을 알고 있습니까?

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

Answer 1

이름, 전공 및 성별에 대한 경우의 변화가 실제 요구 사항이 아니라고 가정하면, 당신은 단지 객체를 푸시 할 수 있습니다. 로

data.push(element); 

당신은 기본적으로 조각하여 요소 조각의 복사본을 생성하고, 왜 그냥 요소 자체를 밀어 것을 추진하고있어인가?