Search code examples
javascriptinternet-explorer-11json2html

json2html is support in IE11?

Recently, I use JSON2HTML v2.1.0 javascript library.

But, when I use template with function in IE11, It is not working.

Here is my full HTML source code:

    <!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsonTohtml</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.1.0/json2html.min.js"></script>
</head>

<body>
    <div class="modal-body" id="modal-news-body">
        <div class="cont-group">
            <div class="col-100">

            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var templates = {
        "detail":
        {"<>":"table","html":[
            {
                "<>":"colgroup", "html":[
                    {"<>":"col", "width":"20%"},
                    {"<>":"col", "width":"30%"},
                    {"<>":"col", "width":"20%"},
                    {"<>":"col", "width":"30%"}
                ]
            },
            {
                "<>":"tbody", "html":[
                    {"<>":"tr", "obj":function(){var arr=[]; var data_size = Object.keys(this).length; var i = 0; for(var key in this){if(i % 2 === 0){item = {};} item[key]=this[key]; if(i % 2 === 1 || data_size-1 === i){arr.push(item);} i++;} return(arr);}, "html":[
                        {"<>":"th", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.keys(obj)[0]);}
                            }
                        ]},
                        {"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.values(obj)[0]);}
                            }
                        ]},
                        {"<>":"th", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.keys(obj)[1]);}
                            }
                        ]},
                        {"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.values(obj)[1]);}
                            }
                        ]}
                    ]}
                ]
            }
        ]}
    };
    
    var data = 
    {
        body: "<div id=\"content\" class=\"content\" role=\"main",
        date: "JULY 13, 2021",
        source: "SERGIO MATALUCCI",
        title: "The Hydrogen Stream: Plans for $75bn, 50 GW green energy hub in Western Australia",
        dummy_key: "dummy_value0"
    }
    
    var div = document.querySelector(".col-100");
    var li_html = json2html.render(data, templates.detail);
    div.innerHTML += li_html;
    </script>

This source code is run properly in chrome.

In IE11, function value is saved in method type.

So, I nervous about this library is not support on IE11.

Can Anyone solve this problem??

Solution

  • I finally found my problem.

    As Fred Stark said, IE11 can not use ES6 style.

    To change ES5 style, I used Babel. But, It can't change javascript in "Template".

    So, I edit my javascript function code as ES5 style in template.

    Trouble is here:

    {"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.values(obj)[0]);}
                            }
                        ]}

    And edit here:

    {"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (obj[Object.keys(obj)[0]]);}
                            }
                        ]}

    In ES5, Object.values is not available.

    Thanks a lot everyone.