Traverse though JSON for Mapping

Access Child properties until there are none left to process

by db_dev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid m-3" data-bind="stopBinding: true">
    <div id="treeVmContainer" class="row">
        <div class="col">
            <h5>Traversing and Mapping Nested Child Properties</h5>
			
			
        </div>
    </div>
</div>

JavaScript

//let KO know that we will take care of managing the child ViewModel bind
ko.bindingHandlers.stopBinding = {
    init: function () {
        return {
            controlsDescendantBindings: true
        };
    }
};

//KO 2.1 - Add containerless support for custom bindings
ko.virtualElements.allowedBindings.stopBinding = true;


// Json Data. This would be placed in the success callback of GET
let data = {
    "name": "Level 1",
    "description": "An Example Tree",
    "treeId": 1017,
    "assetTypeId": 56,
    "conditionMethod": 2,
    "children": [{
        "treeNodeId": 63,
        "treeId": 1017,
        "parentId": 0,
        "name": "Level 2",
        "job": null,
        "measurement": {
            "id": 78,
            "description": "Level 2 - Measurement Descript",
            "measurementType": {
                "id": 33,
                "assetTypeId": 56,
                "name": "Level 2 - Measurement Name",
                "description": null,
                "valueType": 2,
                "dataSourceType": 8,
                "data": {
                    "select1": "43"
                }
            },
            "compareOperator": {
                "valueType": 2,
                "operatorType": 128,
                "name": "Matches"
            },
            "thresholdValues": {
                "Threshold": "RCP"
            }
        },
        "children": [{
            "treeNodeId": 66,
            "treeId": 1017,
            "parentId": 63,
            "name": "Level 3",
            "job": null,
            "measurement": {
                "id": 77,
                "description": "Level 3 - Measurement Descript",
                "measurementType": {
                    "id": 34,
                    "assetTypeId": 56,
                    "name": "Level 3 - Measurement Name",
                    "description": null,
                    "valueType": 1,
                    "dataSourceType": 8,
                    "data": {
                    ...