javascript - 如何将 UL/LI 添加到 json2html 解析

Question

我正在处理试图解析为 HTML 的 JSON 字符串。这是 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

您需要添加 <ul> children 中显式包装功能。

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