json2html/json2html.js at master · addthis/json2html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
(function(w) { //immediately executing

    //parses the element string (within the key) and returns an element.
    var parseElementString = function (name) {
        var el, id, tag, classes;

        //tag
        tag = name.match(/^(\w+)(?:#|.|$)/);
        tag = tag ? tag[1] : 'div';

        //init el
        el = document.createElement(tag);

        //id
        id = name.match(/#[\w][\w-]*/);
        if (id) {
            id = id[0].replace(/#/, '');
            el.setAttribute('id', id);
        }

        //classes
        classes = name.match(/\.[\w][\w-]*/g);
        if (classes) {
            classes = classes.join(' ').replace(/\./g, '');
            el.className = classes;
        }
        return el;
    };

    w = w ? w : this; // attach either to external context or a specified context (argument of this immediately executing function)
    w.json2html = function json2html(elObj) {
        var i,
            key,
            val,
            el,
            elString,
            child,
            obj,
            commonTags,
            isATag,
            args = arguments;

        if(elObj && typeof elObj === 'object' && 'outerHTML' in elObj) {
            return elObj;
        }

        //grab the key of this object
        for(i in elObj) {
            key = i;
            break;
        }

        //create initial element
        el = parseElementString(key);

        //grab the val of this object
        val = elObj[key];

        if(val && typeof val === 'object' &&'outerHTML' in val) { //cursory check for element-ness.
            el.appendChild(val);
            return el;
        }

        //if this is an array, definitely interpret members of that array as children. Apply json2html to each child, then append.
        if (typeof val === 'object' && 'length' in val) {
            for (i in val) {
                var c = json2html(val[i]);
                el.appendChild(c);
            }
            return el;
        }


        //for parsing name
        commonTags = [
            'a',
            'b',
            'body',
            'br',
            'div',
            'em',
            'font',
            'head',
            'h',
            'p',
            'span',
            'button',
            'h1',
            'h2',
            'h3',
            'h4'
        ];

        isATag = function(text) {
            //non-ie
            if(typeof commonTags.indexOf === 'function') {
                return commonTags.indexOf(text) > -1;
            }

            //ie
            for(var i in commonTags) {
                if(text === commonTags[i]) {
                    return true;
                }
            }
            return false;
        };

        var plugins = [];
        var checkIfIsChildren = function(k,v) {
            if(k==='children' || k==='childNodes') {
                for(var i in v) {
                    el.appendChild(json2html(v[i]));
                }
                return true;
            }
        }
        plugins.push(checkIfIsChildren);

        //if the value of this element is a simple string, let's assume that to be the text
        if (typeof val === 'string') {
            el.appendChild(document.createTextNode(val));
        } else {

            //otherwise cycle through the elements
            joe:
            for (elString in val) {
                if(val.hasOwnProperty(elString)) {
                    for(var i in plugins) {
                        if(plugins[i](elString,val[elString])) {
                            break joe;
                        }
                    }

                    child = val[elString];

                    if (typeof child === 'string' // could serve as an attribute
                        && elString.indexOf('.') < 0 // doesnt look like a classname

                        && (    elString.indexOf('#') < 0
                                ||elString.length === 1
                            ) // doesnt look like an id name

                        && !isATag(elString.toLowerCase()) //doesnt appear in the common tag list

                    ) { //treat as an attribute

                        if (elString === 'html') { //"html" here serves as text; "text" might be a useful attribute
                            el.appendChild(document.createTextNode(child));
                        } else {
                            el.setAttribute(elString, child);
                        }
                    }

                    //we think it's a child element
                    else {
                        obj = {};
                        obj[elString] = child;
                        child = json2html(obj);
                        el.appendChild(child);
                    }
                }
            }
        }
        return el;
    };
})(this);