[英]Parsing JSON as HTML nested list
JSON:
{
"Item 1": [
9,
{
"Item 1.1" : 19,
"Item 1.2" : 29,
"Item 1.3" : 39
}
],
"Item 2": 49,
"Item 3": [
59,
{
"Item 3.1" : 69,
"Item 3.2" : 79,
"Item 3.3" : 89
}
]
}
期望的HTML:
<ul class="list">
<li class="item">
<a data-page="9">Item 1</a>
<ul>
<li><a data-page="19">Item 1.1</a></li>
<li><a data-page="29">Item 1.2</a></li>
<li><a data-page="39">Item 1.3</a></li>
</ul>
</li>
<li class="item"><a data-page="49">Item 2</a></li>
<li class="item">
<a data-page="59">Item 3</a>
<ul>
<li><a data-page="69">Item 3.1</a></li>
<li><a data-page="79">Item 3.2</a></li>
<li><a data-page="89">Item 3.3</a></li>
</ul>
</li>
</ul>
我的嘗試( http://jsbin.com/duxoyitifa/edit?js,console,output ):
$(document).ready(function() {
var json = '{"Item 1":[9,{"Item 1.1":19,"Item 1.2":29,"Item 1.3":39}],"Item 2":49,"Item 3":[59,{"Item 3.1":69,"Item 3.2":79,"Item 3.3":89}]}';
var obj = $.parseJSON( json );
//console.log(obj);
var items = [];
$.each( obj, function( k1, v1 ) {
console.log("k1: " + k1);
console.log(v1);
items.push('<li class="item">');
$.each( v1, function( k2, v2 ) {
console.log(v2);
items.push('<a data-page="'+v2+'">'+k1+'</a>');
$.each (v2, function( k3, v3 ) {
console.log(v3);
});
});
items.push('</li>');
//items.push('<li class="item">');
//items.push('<a data-page="'+n+'">'+key+'</a>');
//items.push('</li>');
$("body").append(items.join( "" ));
});
});
我無法想象如何從嵌套對象中獲取n
和子列表。
$(document).ready(function() { var json = '{"Item 1":[9,{"Item 1.1":19,"Item 1.2":29,"Item 1.3":39}],"Item 2":49,"Item 3":[59,{"Item 3.1":69,"Item 3.2":79,"Item 3.3":89}]}'; var obj = $.parseJSON(json); //console.log(obj); var items = []; function eachObj(obj) { $.each(obj, function(key, value) { console.log("iteration start"); console.log(key, value); console.log("iteration end"); items.push('<li class="item">'); if (value != null && Array.isArray(value)) { items.push('<a data-page="' + value[0] + '">' + key + '</a>'); items.push('<ul>'); eachObj(value[1]); items.push('</ul>'); } else { items.push('<a data-page="' + value + '">' + key + '</a>'); } items.push('</li>'); }); } eachObj(obj); $('ul.list').html(items.join("")); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> </ul>
將需要遞歸函數。
(當我找出一個確切的解決方案時,有些偽代碼)
function parseForm(json){
var string = "";
function parseElement(j){
if(j.constructor === Object){
//write element to "string"
for(var i=0; i<j.length; i++){
parseForm(j[i]);
}
//write end tag
}else if(j.constructor === Array){
//write element
for(var i in j){
parseForm(j[i]);
}
//write end tag
}else{
//write
}
}
parseForm(json);
return string;
}
這無限深入。 此解決方案的關鍵是將遞歸部分夾在開始/結束標記之間。 我不確切知道格式化的規則是什么; 我會讓你弄清楚具體的細節。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.