如何將UL / LI添加到json2html解析中

Question

我正在使用JSON字符串嘗試解析為HTML。 這是jsfiddle： http ： //jsfiddle.net/2VwKb/4/

我需要在模型周圍添加一個li並使用ul來包裝應用程序。

這是我的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}"
        }]
    }
};

小提琴