如何添加UL/LI到json2html解析

Question

我正在嘗試解析爲HTML的JSON字符串。這裏是jsfiddle：http://jsfiddle.net/2VwKb/4/

我需要在模型和ul周圍添加一個li來環繞應用程序。

這裏是我的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); 

目前我解析的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> 

這是我的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> 

任何幫助將是非常感謝，謝謝。

Answer 1

您需要在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}" 
     }] 
    } 
}; 

FIDDLE