在HTML表格中显示嵌套的JSON数据对象

-3

我有一个JSON对象，它也包含一个嵌套的项目--TagListList和TaskRecordList。在HTML表格中显示嵌套的JSON数据对象

我想显示EntityCode和EntityName作为'父'行，然后显示TagList，然后显示最后嵌套层 - TaskRecordList数据在此之下。

如何使用Knockout来做到这一点？

var viewModel = function(data) { 
 
    var self = this; 
 
    
 
    // variables 
 
    self.taskRecords = ko.observableArray([ 
 
    \t \t  { 
 
     "EntityCode": "SP00", 
 
     "EntityName": "Sample", 
 
     "TagList": [ 
 
      { 
 
       "TagID": 3, 
 
       "TagName": "Level 3", 
 
       "TaskRecordList": [ 
 
        { 
 
         "TaskRecordID": 33, 
 
         "TaskName": "Cash", 
 
         "Period": "2017-05-16T00:00:00" 
 
        }, 
 
        { 
 
         "TaskRecordID": 34, 
 
         "TaskName": "CashTest", 
 
         "Period": "2017-05-16T00:00:00" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "TagID": 2, 
 
       "TagName": "Level 5", 
 
       "TaskRecordList": [ 
 
        { 
 
         "TaskRecordID": 27, 
 
         "TaskName": "FileIN", 
 
         "Period": "2017-05-16T00:00:00" 
 
        }, 
 
        { 
 
         "TaskRecordID": 21, 
 
         "TaskName": "FileTest", 
 
         "Period": "2017-05-16T00:00:00" 
 
        }, 
 
        { 
 
         "TaskRecordID": 35, 
 
         "TaskName": "OTE Rec", 
 
         "Period": "2017-05-16T00:00:00" 
 
        } 
 
       ] 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "EntityCode": "DEMO", 
 
     "EntityName": "Demo Fund", 
 
     "TagList": [] 
 
    } 
 
    ]); 
 
    
 
}; 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Entity Code</th> 
 
       <th>Entity Name</th> 
 
       <th>TagID</th> 
 
       <th>TagName</th> 
 
       <th>TaskRecordID</th> 
 
       <th>TaskName</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="sortable" data-bind="foreach: taskRecords"> 
 
      <tr class="ui-state-default ui-state-disabled" > 
 
       <td class="ui-state-default" data-bind="text: EntityCode"></td> 
 
       <td class="ui-state-default" data-bind="text: EntityName"></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr data-bind="foreach: TagList"> 
 
       <td></td> 
 
       <td></td> 
 
       <td class="ui-state-default" data-bind="text: TagID"></td> 
 
       <td class="ui-state-default" data-bind="text: TagName"></td> 
 
      </tr> 
 
      <tr data-bind="foreach: TaskRecordList"> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
       <td class="ui-state-default" data-bind="text: TaskRecordID"></td> 
 
       <td class="ui-state-default" data-bind="text: TaskName"></td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

JSFiddle

来源

2017-06-28 Kevin

它看起来像你几乎没有。你的数据结构目前是不一致的，所以我猜你希望你的对象是{"TagID":3, "TagName": "L3"}而不是{"TagID":5}, {"TagName": "L5"}，否则你有两种不同的对象格式，当它试图在第一个对象中找到“TagName”时绑定失败，试图在第二个对象中找到“TagID”。

然后你的绑定需要调整，以便在父foreach中有一个foreach。你可以将第一个foreach移动到tbody中，以便第二个foreach嵌套在它之内。

var viewModel = function(data) { 
 
    var self = this; 
 
    
 
    // variables 
 
    self.taskRecords = ko.observableArray([ 
 
    \t \t { 
 
     \t EntityCode: 1, 
 
     EntityName: "ManualItems", 
 
     TaskRecordList: [ 
 
     \t {"TagID":3, "TagName": "L3"} 
 
     ]}, 
 
    \t { 
 
     \t EntityCode: 2, 
 
     EntityName: "Trades", 
 
     TaskRecordList: [ 
 
     \t {"TagID":5, "TagName": "L5"} 
 
     ]} 
 
    ]); 
 
    
 
}; 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Entity Code</th> 
 
       <th>Entity Name</th> 
 
       <th>TagID</th> 
 
       <th>TagName</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="sortable" data-bind="foreach: taskRecords"> 
 
      <tr class="ui-state-default ui-state-disabled" > 
 
       <td class="ui-state-default" data-bind="text: EntityCode"></td> 
 
       <td class="ui-state-default" data-bind="text: EntityName"></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr data-bind="foreach: TaskRecordList"> 
 
       <td></td> 
 
       <td></td> 
 
       <td class="ui-state-default" data-bind="text: TagID"></td> 
 
       <td class="ui-state-default" data-bind="text: TagName"></td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

来源

2017-06-28 17:11:18

您好，我现在有一个3层的对象。我如何绑定这个？ http://jsfiddle.net/v2L1ny8r/6/ – Kevin

@Kevin你想要第三层在同一行或第二层下面的新行？ –

Jason，作为第二层以下的新行 – Kevin

@jasonspake谢谢。那现在的工作 - http://jsfiddle.net/jlspake/v2L1ny8r/7/

var viewModel = function(data) { 
 
    var self = this; 
 
    
 
    // variables 
 
    self.taskRecords = ko.observableArray([ 
 
    \t \t  { 
 
     "EntityCode": "SP00", 
 
     "EntityName": "Sample", 
 
     "TagList": [ 
 
      { 
 
       "TagID": 3, 
 
       "TagName": "Level 3", 
 
       "TaskRecordList": [ 
 
        { 
 
         "TaskRecordID": 33, 
 
         "TaskName": "Cash", 
 
         "Period": "2017-05-16T00:00:00" 
 
        }, 
 
        { 
 
         "TaskRecordID": 34, 
 
         "TaskName": "CashTest", 
 
         "Period": "2017-05-16T00:00:00" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "TagID": 2, 
 
       "TagName": "Level 5", 
 
       "TaskRecordList": [ 
 
        { 
 
         "TaskRecordID": 27, 
 
         "TaskName": "FileIN", 
 
         "Period": "2017-05-16T00:00:00" 
 
        }, 
 
        { 
 
         "TaskRecordID": 21, 
 
         "TaskName": "FileTest", 
 
         "Period": "2017-05-16T00:00:00" 
 
        }, 
 
        { 
 
         "TaskRecordID": 35, 
 
         "TaskName": "OTE Rec", 
 
         "Period": "2017-05-16T00:00:00" 
 
        } 
 
       ] 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "EntityCode": "DEMO", 
 
     "EntityName": "Demo Fund", 
 
     "TagList": [] 
 
    } 
 
    ]); 
 
    
 
}; 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Entity Code</th> 
 
       <th>Entity Name</th> 
 
       <th>TagID</th> 
 
       <th>TagName</th> 
 
       <th>TaskRecordID</th> 
 
       <th>TaskName</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="sortable" data-bind="foreach: taskRecords"> 
 
      <tr class="ui-state-default ui-state-disabled" > 
 
       <td class="ui-state-default" data-bind="text: EntityCode"></td> 
 
       <td class="ui-state-default" data-bind="text: EntityName"></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <!--ko foreach: TagList--> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td class="ui-state-default" data-bind="text: TagID"></td> 
 
       <td class="ui-state-default" data-bind="text: TagName"></td> 
 
      </tr> 
 
      <tr data-bind="foreach: TaskRecordList"> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
       <td class="ui-state-default" data-bind="text: TaskRecordID"></td> 
 
       <td class="ui-state-default" data-bind="text: TaskName"></td> 
 
      </tr> 
 
      <!--/ko--> 
 
     </tbody> 
 
    </table>

来源

2017-06-29 19:10:21 Kevin

很高兴听到它的帮助。要将答案标记为已接受，请单击答案旁边的复选标记以将其从灰色变为填充。 –

在HTML表格中显示嵌套的JSON数据对象

回答

相关问题