ajax加载HTML模板，动态渲染json数据

【obj】参数是读取的json文件，采用【singulation.html】模板进行渲染

Ajax异步请求，可能导致在objE返回之前还未正确赋值，所以如果遇到该问题，直接改成同步请求加载，即async: true,改成false。

    function singulationInfoHtml(obj) {
        var objE = document.createElement("div");
        objE.id = obj.id;
        objE.setAttribute('class', 'singulation_info');
        $.ajax({
            url: "singulation.html",
            async: true,
            success: function (res) {
                var htmlTemp = res.replace(/\$\{(.+?)\}/g, function (all, $1) { // 将${XX}替换成data[XX]                 
                    return obj[$1];
                });              

                var spans = ``;
                if (obj.function) {
                    for (var key in obj.function) {
                        var spanTemp = `<span class="col-sm-5">` + key + `</span><span  class="col-sm-7 font-H font-smm">` + obj.function[key] + `</span>`;
                        spans += spanTemp;
                    }
                }
                if (obj.disc) {

                    var spanTemp = `<span class="col-sm-12">` + obj.disc + ` </span>`;
                    spans += spanTemp;
                }           
                
                objE.innerHTML = htmlTemp;
                objE.childNodes["0"].lastElementChild.lastElementChild.innerHTML = spans;
                // console.log(objE.childNodes["0"].lastElementChild.lastElementChild);
                
                // console.log(objE.innerHTML);
               
            },
            dataType: "html"
        });
        return objE;

    }

json文件格式如下：

[{
        "id": "jh1",           
        "HeadingPitchRoll":[2.809728786416368, 0.0, 0.0],
        "Translation":[0.5,1.2,0.0],
        "dimensions":[2.8,4, 15.0],
        "position": {
            "Lon": "118.47962774390756",
            "Lat": "37.44375382514783",
            "Alt": "9.325138103497537"            
        },
		"function": {
            "function1": "ad",
            "function2": "arf",
            "function3": "afaf"            
        },
		 "disc":"<a href='http://xiaofengbi.top' target='main'>Alice</a>"      
 }

singulation.html文件模板

<div class="singulation_infoDiv">
    <div class="panel panel-default" style="float: left; width: 100%;">
        <div class="panel-heading" style="padding: 8px">
            ${id}
            <a class="fa fa-times singulation_infoDiv_close" style="float: right" href="javascript:;"></a>
        </div>
        <div class="panel-body">
        </div>
    </div>
</div>

下面就可以动态展示你的数据了。json里面存的大量数据，再也不怕展示了，配上自己独特的css就更完美了。

document.body.appendChild(singulationInfoHtml); 
$(".singulation_infoDiv_close").click(function () {
         $('#' + currentObjectId).hide();
});

提上其中一个数据块的效果，自己动手试一下吧。