how to Iterating through Json response containing arrays ,objects ,k-v pairs using recursion?

Question

I have a json response and currently i am iterating using for loops . I want to eliminate the for loops and use recursive functions to shorten it . $searchModal is the code is modal where I am iterating through k-v pairs and appending to the modal.

>Json response :
>ActiveFlag: -1
 >Address: [{…}]
>BadAddressDate: null
>ContactID: 9999
>ContactName: "William Clem Dec"
>DateOfBirth: "1972-08-17T00:00:00"
>Phone: [{…}]
>PrimaryFirstName: "William"
>PrimaryLastName: "Clem Dec"
>PrimaryMiddleInitial: null
>RoleCode: 0
>RoleCodeDescription: null
>TaxID: "338722304"
>TaxIDType: "SSN"
>Udfs: {}


var contactMap = {
    "url": `${contactUrl}`,
    "id": 'contactData',
    "node": '#contactData',
    "label": "Contact",
    "message": "Contact Not Found",
    "tab": "contact"
};

function search(map) {
return new Promise(function (resolve) {
    http.get(map.url).then(function (data) {
        if (data.length != 0) {
            var val = 1;
            $searchModal.find('#tabContent').append(`<li><a href="#${map.tab}" aria-controls="home" role="tab"
        data-toggle="tab">${map.label}</a></li>`);
            for (var i = 0; i < data.length; i++) {
                $searchModal.find('#data').append(`<div role="tabpanel" class="tab-pane fade" id=${map.tab}><div class="panel-body" id=${map.id}><div class="col-xs-12"><label> ${map.label} ${val}</label></div>`);
                var val = val + 1;
                for (key in data[i]) {
                    var index = 1;
                    if (key == "Udfs") {
                        $searchModal.find(map.node).append(`<div class="col-xs-12"><label> ${key} </label></div>`);
                        for (udfKey in data[i][key]) {
                            $searchModal.find(map.node).append(`<div class="col-lg-3" ><div class="input-group"> <span class="input-group-addon" id="key">${udfKey}</span> <input id="accountModelId" type="text" disabled class="form-control" placeholder="" aria-describedby="accountModel" value="${data[i][key][udfKey]}"></div></div>`);
                        }
                    }
                    for (var j = 0;
                        (Array.isArray(data[i][key])) && j < data[i][key].length; j++) {
                        $searchModal.find(map.node).append(`<div class="col-xs-12"><label> ${key} ${index}</label></div>`);
                        var index = index + 1;
                        for (objKey in data[i][key][j]) {
                            $searchModal.find(map.node).append(`<div class="col-lg-3" ><div class="input-group"> <span class="input-group-addon" id="key">${objKey}</span> <input id="accountModelId" type="text" disabled class="form-control" placeholder="" aria-describedby="accountModel" value="${data[i][key][j][objKey]}"></div></div>`);
                        }
                    }
                    if (!Array.isArray(data[i][key]) && !(data[i][key] instanceof Object)) {
                        $searchModal.find(map.node).append(`<div class="col-lg-3" ><div class="input-group"> <span class="input-group-addon" id="key">${key}</span> <input id="accountModelId" type="text" disabled class="form-control" placeholder="" aria-describedby="accountModel" value="${data[i][key]}"></div></div>`);
                    }
                }
                $searchModal.find('#data').append(`</div>`);
                $searchModal.find('#data').append(`</div>`);
            }
        }
        resolve(console.log(data));
        if (data.length == 0) {
            alerts.error(map.message)
        }
    }).catch(function err() {
        $searchModal.show("modal")
        alerts.error(map.message)
        spinners.stop(spinners.start(spinners.WANDERING_CUBES, $searchModal))
    });
});

}

response looks like this.

Any good suggestions to refactor the code avoiding the for loops ?

Answer 1

To iterate object you can use:

let record = {'key1': 'value1', 'key2': {'test':'123'}, 'key3': [{'test1':'23'}]};

if(typeof record === 'object' && record != null){
   Object.keys(record).forEach((key)=>{        
     if(typeof record[key] == 'object' && record[key] != null){        
         //logic for the object        
     }else if(typeof record[key] == 'array' && record[key] != null){        
        //logic for array        
     }else {        
       //logic for other type        
     }        
   });        
}else if(typeof record === 'array'){
     record.forEach(r => {
          if(typeof r == 'object' && r != null){        
             //logic for the object        
          }else if(typeof r == 'array' && r != null){        
            //logic for array        
          }else {        
            //logic for other type        
          }
     });
}