在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數據對象

回答

相關問題