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

您需要在<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

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

1 个答案: