javascript - 如何使用递归遍历包含数组、对象、kv 对的 Json 响应?
问题描述
我有一个 json 响应,目前我正在使用 for 循环进行迭代。我想消除 for 循环并使用递归函数来缩短它。$searchModal 是模态代码,我在其中迭代 kv 对并附加到模态。
>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))
});
});
}
响应看起来像这样。
有什么好的建议来重构代码以避免 for 循环?
解决方案
要迭代对象,您可以使用:
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
}
});
}
推荐阅读
- python - 在 Python 中将 dict 转换为另一个结构
- mysql - MySQL 5.7 JSON 列更新
- c++ - 在基类中定义枚举时,qml 中的 Q_ENUM 未定义值
- java - 发送电子邮件后的测试报告状态滑动
- c# - 比较通用的 Nullable 类型
- x86 - x86-64 CPU 寄存器是否在多个内核之间共享?
- python - 你能看到这里有什么问题吗:Python For Loop 将无法运行,'Int not subscriptable'
- javascript - 通过单击按钮 php 将 javascript 数组插入数据库
- c++ - 为什么 std::atomic 中的所有成员函数都有 volatile 和没有 volatile?
- android - 如何让CombinedChart-BarChart平均分布在x轴上?