在递归循环中迭代和处理JSON对象会导致堆栈超出错误
Iterating and processing JSON Object in recursive loop causes Stack Exceeded Error
我正在尝试使用JS构建一个HTML页面。需要进入HTML的细节以json对象的形式从服务器发送过来。现在json对象的结构基本上模仿了dom结构,我遍历对象并从中获取单个html元素数据并呈现html字符串。当我使用递归函数来遍历这个对象时,就会出现这个问题。触发堆栈超出错误。我猜这是因为浏览器栈大小的限制。我想了解,我可以迭代这个对象来创建页面而不会导致脚本失败的最佳方式是什么。
pageObj Structure ->
//only a representation of object, the size is much larger.
{ "Default" : { "#text" : [ "'n ",
"'n"
],
"MainForm" : { "#text" : [ "'n ",
"'n ",
"'n "
],
"shippingInfo" : { "#text" : [ "'n ",
"'n ",
"'n ",
"'n ",
"'n ",
"'n ",
"'n ",
"'n "
],
"@attributes" : { "title" : "Shipping Information",
"type" : "FormBlock"
},
"Row" : [ { "#text" : [ "'n ",
"'n "
],
"fName" : { "@attributes" : { "placeHolder" : "Enter First Name",
"title" : "First Name",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n "
],
"lName" : { "@attributes" : { "placeHolder" : "Enter Last Name",
"title" : "Last Name",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n "
],
"addr1" : { "@attributes" : { "title" : "Address 1",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n "
],
"addr2" : { "@attributes" : { "title" : "Address 2",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n ",
"'n "
],
"state" : { "@attributes" : { "title" : "State",
"type" : "text"
} },
"zipCode" : { "@attributes" : { "title" : "Zip Code",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n ",
"'n "
],
"country" : { "@attributes" : { "title" : "Country",
"type" : "text"
} },
"phone" : { "@attributes" : { "title" : "Phone",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n ",
"'n ",
"'n ",
"'n "
],
"day10" : { "@attributes" : { "title" : "10 day Shipping ($3)",
"type" : "radio"
} },
"day5" : { "@attributes" : { "title" : "5 Shipping ($10)",
"type" : "radio"
} },
"free" : { "@attributes" : { "title" : "Free Shipping ($0)",
"type" : "radio"
} },
"overNight" : { "@attributes" : { "title" : "One day Shipping ($20)",
"type" : "radio"
} }
}
]
},
"userInfo" : { "#text" : [ "'n ",
"'n ",
"'n ",
"'n "
],
"@attributes" : { "title" : "User Information",
"type" : "FormBlock"
},
"Row" : [ { "#text" : [ "'n ",
"'n "
],
"TextBox" : { "@attributes" : { "placeHolder" : "Select an username",
"title" : "Username",
"type" : "text"
} }
},
{ "#text" : [ "'n ",
"'n "
],
"TextBox" : { "@attributes" : { "placeHolder" : "Select a password",
"title" : "Password",
"type" : "password"
} }
},
{ "#text" : [ "'n ",
"'n "
],
"TextBox" : { "@attributes" : { "placeHolder" : "Eg: name@gmail.com",
"title" : "Email",
"type" : "text"
} }
}
]
}
}
} }
为了迭代这个对象,我使用了下面的技术:
function iterateJsonObj(obj) {
for(key in obj) {
if(!obj.hasOwnProperty(key) || key=="#text") {
continue;
}
else if(obj[key]["@attributes"]!=null)
{
htmlStr += createHTMLStr(obj[key], key);
}
iterateJsonObj(obj[key]);
}
}
希望这个问题有意义。
这是一个退化的复制情况:
iterateJsonObj("Some text");
你能看到发生了什么吗?显然,for循环处理字符串的方式类似于处理单字符子字符串的数组。"Shipping"[0]是"S",它本身就是一个字符串…
为了解决这个问题,我建议在以这种方式迭代它之前测试typeof obj[key] === "object"。
同样,编写单元测试。他们会让你的生活更轻松。:)
相关文章:
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- Fresh Spark Install+Homestead上的Vue异步堆栈跟踪错误
- 日志:未捕获的范围错误:超过了最大调用堆栈大小
- 是否排除节点中错误堆栈的第一行?/节点中的自定义错误类型
- 未捕获的范围错误:setTimeout()超过了最大调用堆栈大小
- JavaScript继承:未捕获的范围错误:超过了最大调用堆栈大小
- 收到“范围错误: 超出最大调用堆栈大小”错误
- Chrome/jQuery未捕获范围错误:超过了最大调用堆栈大小(函数循环)
- 警告:字体加载过程中出错:轨道上的PDFJS超过了最大调用堆栈大小错误
- 如何在Chrome扩展内容脚本中获取错误堆栈跟踪
- AngularJS-范围错误:''之后超过了最大调用堆栈大小;应用程序启动
- Javascript V8复合错误堆栈格式
- parseInt(x,10)导致最大调用堆栈/过多递归错误
- 绑定到堆栈错误
- 系统堆栈错误 - 堆栈级别太深
- 尝试在解析 JS API 中创建新用户时的最大调用堆栈错误
- 添加“toJSON"JavaScript对象实例的方法导致最大调用堆栈错误
- Javascript堆栈错误
- Webview JavaScript调用堆栈错误
- ES6生成器:从iterator.throw(err)中跟踪堆栈错误