Error When Creating Element Using Jquery

This is the error that occurs: Uncaught TypeError: Cannot read property 'replace' of undefined jquery.min.js:2 m.extend.camelCase jquery.min.js:2 m.extend.css jquery.min.js:3 (anon

Solution 1:

In your data you have an inconsistency : for the first children you have a style and for the second you don't.

I think your error comes from this line on .css call.

var element=$('<'+elem["el"]+'>').attr(elem["attributes"]).css(elem["style"]).appendTo(base);

Look what happens when you .css(undefined) in this jsbin: http://jsbin.com/kuwoc/1/edit

so you can try reshape your make['data'] function adding undefined checks:

makeData["data"]=function(obj){
    var td=$('<td></td>').css(obj["style"]);
    var td_out=reduce(obj.children,td,function(base,elem){
        var element=$('<'+elem["el"]+'>');
        if(elem["attributes"]){
          element.attr(elem["attributes"]);
        }
        if (elem["style"]){
          element.css(elem["style"]);
        }
        element.appendTo(base);
    });
    console.log(td_out.get(0));
    console.log(td_out.html());
    return td_out;
};

PS: And as a recommendation consider the dot notation as well, instead of makeData['data'] use makeData.data.