Cannot showing div tag in td tag transform object

[Jade Yeom]

Transform declare and building with jquery

var msgTranform = [
                {"tag": "td", "html": [
                    {
                        "tag": "div", "class": "sc-profile", "html": [
                        {"tag": "div", "class": "sc-profile-image", "style": "background-image: url('${receivers_picture}')", "html": ""},
                        {"tag": "p", "class": "sc-profile-name", "html": "${receivers}"}
                    ]
                    }
                ]
                },
                {"tag": "td", "html": "${last_message}"},
                {"tag": "td", "html": "${date}"}
            ];
var $boxModel = $("<tr/>").attr('idx', model.idx).attr("onclick", "location='example.link" + model.idx + "';").json2html(model, msgTranform);
$(".sc-mypage-post-table.chat > tbody").append($boxModel);

Output

<tr idx="6411" onclick="location='example.link/6411';"><td>[object Object]</td><td>example contents</td><td>example date</td></tr>

But is not binding div tag in td tag trasform object

What should i do?

[Chad Brown]

I'm unable to re-produce what you're experiencing : what browser are you trying this in? (including version)

Here is the exact code that I tried running and it returned expected results

`
$(function(){

    var model = {
        "receivers":"receivers",
        "receivers_picture":"example.jpg",
        "last_message":"example contents",
        "date":"example date"
    };

    var msgTranform = [
                {"tag": "td", "html": [
                    {
                        "tag": "div", "class": "sc-profile", "html": [
                        {"tag": "div", "class": "sc-profile-image", "style": "background-image: url('${receivers_picture}')", "html": ""},
                        {"tag": "p", "class": "sc-profile-name", "html": "${receivers}"}
                    ]
                    }
                ]
                },
                {"tag": "td", "html": "${last_message}"},
                {"tag": "td", "html": "${date}"}
            ];
    var $boxModel = $("<tr/>").attr('idx', model.idx).attr("onclick", "location='example.link" + model.idx + "';").json2html(model, msgTranform);
    $("#table > tbody").append($boxModel);
});

`

Also as a side note you could greatly simplify your jquery calls and incorporate them into the transform like so

`
$(function(){

    var model = {
        "idx":"id",
        "receivers":"receivers",
        "receivers_picture":"example.jpg",
        "last_message":"example contents",
        "date":"example date"
    };

    var location;

    var msgTranform = [
            {"tag": "tr","idx":"${idx}","onclick":function(e){
                console.log('example.link'+e.obj.idx);
            }, "html": [
                {"tag": "td", "html": [
                    {
                        "tag": "div", "class": "sc-profile", "html": [
                        {"tag": "div", "class": "sc-profile-image", "style": "background-image: url('${receivers_picture}')", "html": ""},
                        {"tag": "p", "class": "sc-profile-name", "html": "${receivers}"}
                    ]
                    }
                ]
                },
                {"tag": "td", "html": "${last_message}"},
                {"tag": "td", "html": "${date}"}
            ]}
        ];

    $("#table > tbody").json2html(model, msgTranform);
});

`

[Jade Yeom]

Thank you and sorry for my poor your library usage.
I tried update to latest json2html then solved it. :)

I knew json2html method included jquery append method now.
In the past happend child objects problem. however now it seems like that was solved.

Thank you so much.