IE11 支持 json2html 吗？答案

【问题标题】：json2html is support in IE11?IE11 支持 json2html 吗？
【发布时间】：2021-10-09 08:45:42
【问题描述】：

最近，我使用 JSON2HTML v2.1.0 javascript 库。

但是，当我在 IE11 中使用带有函数的模板时，它不起作用。

这是我的完整 HTML 源代码：

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

本源代码在chrome中运行正常。

在IE11中，函数值保存在方法类型中。

所以，我担心这个库在 IE11 上不支持。

谁能解决这个问题？？

【问题讨论】：

我可以立即发现在 ie11 for(const item of _object[k]) 中不起作用的 for .. of 循环
请同时检查您在 IE11 中的浏览器控制台。如果有任何不兼容的地方，可能会在此处发布错误消息。
IE11 也不支持const 和let
布鲁谁还在用ie？
感谢 Fred Stark。实际上这个源代码通过 babel 隐藏了 es6 风格。但是，为了避免混淆，上面源代码中将字符串转换为函数的逻辑去掉了。

标签： javascript internet-explorer-11 json2html

【解决方案1】：

我终于找到了我的问题。

正如 Fred Stark 所说，IE11 不能使用 ES6 风格。

为了改变 ES5 风格，我使用了 Babel。但是，它不能更改“模板”中的 javascript。

所以，我在模板中将我的 javascript 函数代码编辑为 ES5 样式。

麻烦来了：

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

并在此处编辑：

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

在 ES5 中，Object.values 不可用。

非常感谢大家。

【讨论】：

恭喜！感谢您发布此问题的解决方案。您可以在 48 小时后将您的答案标记为已接受的答案，此时可以标记。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。