[英]how do I add UL / LI to json2html parsing
I'm working with a JSON string trying to parse to HTML. 我正在使用JSON字符串尝试解析为HTML。 Here is the jsfiddle: http://jsfiddle.net/2VwKb/4/ 这是jsfiddle: http : //jsfiddle.net/2VwKb/4/
I need to add a li around the model and a ul to wrap around the applications. 我需要在模型周围添加一个li并使用ul来包装应用程序。
Here's my JS: 这是我的JS:
var data = [
{"vehicles":[
{"models":[
{"applications":[
{"location":"Front","endYear":1999,"startYear":1999},
{"location":"Front","endYear":2000,"startYear":2000},
{"location":"Front","endYear":2001,"startYear":2001},
{"location":"Front","endYear":2002,"startYear":2002},
{"location":"Front","endYear":2003,"startYear":2003},
{"location":"Front","endYear":2004,"startYear":2004},
{"location":"Front","endYear":2005,"startYear":2005}
],
"model":"Cavalier"}],
"make":"Chevrolet"},
{"models":[
{"applications":[
{"location":"Front","endYear":1999,"startYear":1999},
{"location":"Front","endYear":2000,"startYear":2000},
{"location":"Front","endYear":2001,"startYear":2001},
{"location":"Front","endYear":2002,"startYear":2002},
{"location":"Front","endYear":2004,"startYear":2003},
{"location":"Front","endYear":2005,"startYear":2005}],
"model":"Sunfire"}],
"make":"Pontiac"}]}
];
var transform = {
"vehicles":{"tag":"ul","children":function() {
return(json2html.transform(this.vehicles,transform.make));
}},
"make":{"tag":"li","html":"${make}","children":function() {
return(json2html.transform(this.models,transform.model));
}},
"model":{"tag":"ul","html":"${model}","children":function() {
return(json2html.transform(this.applications,transform.applications));
}},
"applications":{"tag":"li","children":[
{"tag":"div","html":"${startYear} - ${endYear} ${location}"}
]}
};
$('#json').json2html(data,transform.vehicles);
Currently my parsed html looks like: 目前我解析的html看起来像:
<ul>
<li>
Chevrolet
<ul>
Cavalier
<li>
<div>1999 - 1999 Front</div>
</li>
<li>
<div>2000 - 2000 Front</div>
</li>
<li>
<div>2001 - 2001 Front</div>
</li>
<li>
<div>2002 - 2002 Front</div>
</li>
<li>
<div>2003 - 2003 Front</div>
</li>
<li>
<div>2004 - 2004 Front</div>
</li>
<li>
<div>2005 - 2005 Front</div>
</li>
</ul>
</li>
<li>
Pontiac
<ul>
Sunfire
<li>
<div>1999 - 1999 Front</div>
</li>
<li>
<div>2000 - 2000 Front</div>
</li>
<li>
<div>2001 - 2001 Front</div>
</li>
<li>
<div>2002 - 2002 Front</div>
</li>
<li>
<div>2003 - 2004 Front</div>
</li>
<li>
<div>2005 - 2005 Front</div>
</li>
</ul>
</li>
</ul>
This is what my html need to look like: 这是我的html需要看起来像:
<ul>
<li>
Chevrolet
<ul>
<li>
Cavalier
<ul>
<li>
<div>1999 - 1999 Front</div>
</li>
<li>
<div>2000 - 2000 Front</div>
</li>
<li>
<div>2001 - 2001 Front</div>
</li>
<li>
<div>2002 - 2002 Front</div>
</li>
<li>
<div>2003 - 2003 Front</div>
</li>
<li>
<div>2004 - 2004 Front</div>
</li>
<li>
<div>2005 - 2005 Front</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
Pontiac
<ul>
<li>
Sunfire
<ul>
<li>
<div>1999 - 1999 Front</div>
</li>
<li>
<div>2000 - 2000 Front</div>
</li>
<li>
<div>2001 - 2001 Front</div>
</li>
<li>
<div>2002 - 2002 Front</div>
</li>
<li>
<div>2003 - 2004 Front</div>
</li>
<li>
<div>2005 - 2005 Front</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Any help would be much appreciated, Thank you. 非常感谢任何帮助,谢谢。
You need to add the <ul>
wrappers explicitly in the children
function. 您需要在children
函数中显式添加<ul>
包装器。
var transform = {
"vehicles": {
"tag": "ul",
"children": function () {
return (json2html.transform(this.vehicles, transform.make));
}
},
"make": {
"tag": "li",
"html": "${make}",
"children": function () {
return ('<ul>' + json2html.transform(this.models, transform.model) + '</ul>');
}
},
"model": {
"tag": "li",
"html": "${model}",
"children": function () {
return ('<ul>' + json2html.transform(this.applications, transform.applications) + '</ul>');
}
},
"applications": {
"tag": "li",
"children": [{
"tag": "div",
"html": "${startYear} - ${endYear} ${location}"
}]
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.