javascript - 将对象作为innerHTML添加到javascript/jquery中动态创建的div中很困难

Question

我的项目中有以下代码

HTML:

<input type="text" id="Num">
<input type="button" value="Insert Div" onClick="insertDiv(getElementById('Num').value)" />
<div class="container">
<div id="main">All starts from here</div>
</div>

Javascript:

lookupdata=[
{"id":2,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
{"id":16,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
{"id":8,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
{"id":5,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
];

function insertDiv(Num){
    var ar1=Num.replace('[', '');
    ar1=ar1.replace('[', '');
    ar1=ar1.replace(']', '');
    ar1=ar1.replace(']', '');
    alert(ar1);
    var array = JSON.parse("[" + ar1 + "]");
    alert(JSON.stringify(lookupdata,null,2));
    var i=0;
        for(i;i<array.length;i++)
        {
            $( "<div id='sp"+array[i]+"'>This is div with id "+array[i]+"<div class='st'></div></div>" ).insertAfter( "#main");
        }
}    

使用上面的代码，我可以为输入字符串数组动态创建 div -示例:如果我输入 [[8,2,5]]，它会创建三个 id 为 - 8,2,5的 div

但是，我想将名为“lookupdata”的对象中的 st 值插入到相应的 id div 中。

这样做的目的是，我想使用 st 作为内部 div 中图表的输入(带有“st”类)。

我怎样才能做到这一点？

这是工作演示 - http://jsfiddle.net/sathish_panduga/3581rh71/7/

Answer 1

您可以使用 jQuery 的 grep用于搜索数组的函数。

function getObjContents(i){
  var arr = $.grep(input, function(e){ 
    return e.id == i; 
  });
  var str="";
  for (var i = 0; i < arr[0].st.length; i++) {
    str += JSON.stringify(arr[0].st[i]);
  }
  return str;
}

你可以这样调用它:

$( "<div id='sp"+array[i]+"'>This is div with id "+array[i]+getObjContents(Num)+"<div class='st'></div></div>" ).insertAfter( "#main");

Demo