Question

I try to create a working json-object structure to create a defintion list.
see what i try to do here:
jsfiddle

var x =
[{
    "dl":
    {
        "dt":"head 1"
        {
            "dd":
            [
                "listitem 1",
                "listitem 1",
                "listitem 1",
                "listitem 1",
                "listitem 1"
            ]
        },
       "dt":"head 2"
        {
            "dd":
            [
                "listitem 2",
                "listitem 2"
            ]
        }
    }      
}]
;

By executing this snippet of JS I try to create markupt from the JSON object:

$.each(x["dl"], function(i,v){
    console.log(this.dt, this.dd);
});

Using the variable x I try to create the following markup:

<dl>
    <dt>head 1</dt>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>

    <dt>head 2</dt>
    <dd>listitem 2</dd>
    <dd>listitem 2</dd>   
</dl>

<dl>
    <dt>head 1</dt>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>
    <dd>listitem 1</dd>

    <dt>head 2</dt>
    <dd>listitem 2</dd>
    <dd>listitem 2</dd>   
</dl>

the markup is what I need to create. What do I do wrong in my JSON structure?

Answer 1

First off, this is not JSON. This is just a JavaScript object. JSON is a string representation of a JavaScript object.

Second, your object isn’t correct. You can’t have multiple dt properties, I suggest making that an array. "dt":"head 1" { isn’t valid. Also, x should be an object, not an array (of an object).

I suggest making your object like this:

var x = {
    "dl": [{
        "dt": "head 1",
        "dd": ["listitem 1", "listitem 1", "listitem 1", "listitem 1", "listitem 1"]
    }, {
        "dt": "head 2",
        "dd": ["listitem 2", "listitem 2"]
    }]
};

x is an object that contains a dl property. x.dl is an array containing objects. Those objects contain dt and dd properties.

Now your snippet will work correctly:

$.each(x["dl"], function(i,v){ // you can also use "x.dl"
    console.log(this.dt, this.dd);
});

From this object it’s easy to make the HTML you want.