0

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??

DONG-JIN LEE
  • 113
  • 12
  • 3
    I can immediately spot a `for .. of` loop that won't work in ie11 `for(const item of _object[k])` – coagmano Aug 04 '21 at 08:56
  • Please also check your browser console in IE11. If anything is not compatible there is likely an error message to post here. – Peter Krebs Aug 04 '21 at 09:44
  • 1
    IE11 doesn't support `const` and `let`, too – Terry Aug 04 '21 at 09:46
  • bruh who still uses ie? – Antoni Aug 04 '21 at 10:12
  • Thanks attention Fred Stark. Actually this source code covert es6 style through babel. But, In order to avoid confusion, the logic to convert from string to function removed above source code. – DONG-JIN LEE Aug 04 '21 at 23:52
  • Thanks Peter Krebs. In IE11 have not error. But, It has 2 warning. 1. DOM7011: The code on this page disabled back and forward caching. 2. HTML1506: Unexpected token. – DONG-JIN LEE Aug 04 '21 at 23:57
  • Thanks Terry. This source code will be covert es6 style through babel. Don't worry about that. – DONG-JIN LEE Aug 05 '21 at 00:03

1 Answers1

0

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.

DONG-JIN LEE
  • 113
  • 12