how do I add UL / LI to json2html parsing

Question

I'm working with a JSON string trying to parse to HTML. Here is the jsfiddle: http://jsfiddle.net/2VwKb/4/

I need to add a li around the model and a ul to wrap around the applications.

Here's my 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:

<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:

<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.

score 3 · Accepted Answer · answered Nov 21 '13 at 19:42

3

You need to add the <ul> wrappers explicitly in the children function.

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

answered Nov 21 '13 at 19:42

Barmar

741,623
53
500
612

Perfect! I didn't know you could add the UL in the function. Thank you! – teamdane Nov 21 '13 at 19:47
`children` is supposed to return the HTML for the children. You can put any HTML you want in there. – Barmar Nov 21 '13 at 19:48
SO glad we can do both `html` and `children` now! – Jul 11 '14 at 18:41
thanks a lot for your example! helped me to figure out how json2html works – DenisFLASH Aug 31 '14 at 07:48

how do I add UL / LI to json2html parsing

1 Answers1