Javascript 如何在knockout中将Json数据绑定到Html

我正在从我的json对象接收以下数据

var dataFromServer='[
    {
        "Id":1,
        "Name":"Province A",
         "AreaDTO":[],
         "SubStationDTO":[]
    },
    {
         "Id":2,
         "Name":"Province B",
          "AreaDTO":[
              {
                  "Id":1,
                  "Name":"ProvinceB Area A",
                  "ProvinceId":2,
                  "SubStationDTO":null
              },
              {
                  "Id":2,
                  "Name":"Province B Area B",
                  "ProvinceId":2,
                  "SubStationDTO":null
              }],
          "SubStationDTO":[
              {
                  "Id":1,
                  "Name":" Province B Area A SubStation A",
                  "AreaId":1,
                  "MetersDTO":null
              }     
          ]
    }
]';

请参阅：

省名
面积计数
变电站计数



例如,，
（感谢ace提供了正确的格式）
我为您的应用程序制作了一个新的JSFIDLE。我已经修复了一些基本错误

该表已实现

您的视图模型实现不好，我重新组织了它

var ProvinceViewModel = function () {
    var self = this;

    this.Province = function(data){ 
        data = data || {};

        this.Id = data.Id;
        this.Name=data.Name;
        this.Areas = ko.observableArray([]);
        this.SubStations = ko.observableArray([]);
    };

    this.ProvincesArray = ko.observableArray([new     this.Province()]);

    this.Area = function(data){
    data = data || {};

        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.SubStations = ko.observableArray([]);
    };

    this.SubStation = function(data){
       data = data || {};

        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.Meters = ko.observableArray([]);
    };    

    this.ProvincesArray = ko.utils.arrayMap(dataFromServer,            function(item) {

        var Province = new self.Province(item);
        var Area= new self.Area(item);
        var SubStations= new self.SubStation();

        return Province;
    });
};
ko.applyBindings(new ProvinceViewModel());

你可以看到新的结构，你可以添加任何参数

您能提供错误详细信息吗？基本上，一个省可以有多个地区。一个区域可以有多个变电站。我正在从数据库中阅读这些细节，并通过ajax转换成html。在我的调试中，当我调用我的http方法并像这样解析“JSON.stringify（ko.toJS（resultToFallingUrlgetall））；”时，我收到了上面的数据。现在我想将这些数据显示为HTML。您发布的代码中有很多基本语法错误和打字错误。我建议你花点时间在上浏览一下样品。别担心，希望它能帮你解锁：）
var ProvinceViewModel = function () {
    var self = this;

    this.Province = function(data){ 
        data = data || {};

        this.Id = data.Id;
        this.Name=data.Name;
        this.Areas = ko.observableArray([]);
        this.SubStations = ko.observableArray([]);
    };

    this.ProvincesArray = ko.observableArray([new     this.Province()]);

    this.Area = function(data){
    data = data || {};

        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.SubStations = ko.observableArray([]);
    };

    this.SubStation = function(data){
       data = data || {};

        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.Meters = ko.observableArray([]);
    };    

    this.ProvincesArray = ko.utils.arrayMap(dataFromServer,            function(item) {

        var Province = new self.Province(item);
        var Area= new self.Area(item);
        var SubStations= new self.SubStation();

        return Province;
    });
};
ko.applyBindings(new ProvinceViewModel());