遍历 JSON 并创建 DIV 标记

Question

我有以下东西。我有一个包含一些值的 JSON 数组。我基本上使用 JSON-lib 通过一些时髦的类从列表转换为 JSONArray。现在，我有一个JS文件和一个用于前端的JSF。

我需要遍历 JS 文件中的 JSON 数组，对于数组中的每个项目，我需要在 JSF 页面中创建一个新的div 标签并调用相应的 JS 函数来填充div 标签。

有人可以帮助我吗？我只是不确定如何迭代 JSON 数组并创建div 标签。我已经有了用我填充div 标签的功能。

任何帮助将不胜感激。

我正在尝试做这样的事情

Reports.generateCharts = function generateCharts(){
  var jsonDeviceArr = {"Devices" :'${reportViewproto.selectedDevices}'};
  $.each(jsonDeviceArr, function(i, val){
    function create_div(){
      var cid = "chart"+i;
      dv = document.createElement('div');
      dv.setAttribute('id', cid);
      dv.style.position="center";
      dv.style.pixelLeft=20;
      dv.style.pixelTop=100;
      dv.style.pixelWidth=10;
      dv.style.pixelHeight=20;
      dv.attachEvent("onload", 
      function(){
        generateSparkLine(cid, '');
      });
      document.forms[0].appendChild(dv);
    }
  });
} 

其中"reportViewprot"是一个bean，它有一个函数"getSelectedDevices（）"，它将返回JSON数组。现在这个函数'generateCharts（）'存在于一个单独的JS文件中，当加载JSF页面时，必须加载div标签。

不过这行不通。我在这里错过了什么吗？

希望我清楚。

谢谢。

Answer 1

如果你使用的是jQuery，你应该使用jQuery.each（）。它是一个通用迭代器函数，可用于无缝迭代对象和数组。

例：

$.getJSON('ajax/test.json', function(data) {   
    $.each(data, function(key, value) {
        $("#parent").append("<div>" + function(key, value) + "</div>");
    });        
});

Answer 2

两点：

1. 似乎没有人调用"create_div"函数。你为什么不直接删除那个函数包装器？
2. 您的 onload 函数在闭包中捕获"dv"，这曾经导致某些浏览器上的内存泄漏（可能仍然如此）。

您可以使用jQuery获取表单对象，然后使用append函数（如Diogo所做的那样）在其上创建div作为纯HTML（字符串形式）或通过菊花链jQuery函数（如append，css，bind等）。查看 jQuery 网站以获取示例。

这样做可以避免闭包问题，并且可能更易于阅读。