Перебор JSON и создание тегов DIV

Question

У меня есть следующие вещи. У меня есть массив JSON, содержащий некоторые значения. Я в основном использовал JSON-lib для преобразования из List в JSONArray, используя некоторые классы Groovy. Теперь у меня есть файл JS и JSF для внешнего интерфейса.

Мне нужно перебрать массив JSON в файле JS, и для каждого элемента в массиве мне нужно создать новый тег div на странице JSF и вызвать соответствующую функцию 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, и теги div должны быть загружены при загрузке страницы JSF.

Это не работает, хотя. Я что-то здесь упускаю?

Надеюсь, мне ясно.

Спасибо, S.

Answer 1

Два очка:

1. Кажется, никто не вызывает функцию "create_div". Почему бы вам просто не удалить эту оболочку функции?
2. Ваша функция загрузки загружает "dv" в замыкание, которое вызывало утечки памяти в некоторых браузерах (возможно, до сих пор).

Вы можете использовать jQuery для извлечения объекта формы, а затем использовать функцию добавления (как это сделал Диого), чтобы создать свой div для этого в виде чистого HTML (в виде строки) или с помощью последовательных функций jQuery, таких как append, css , привязка и т. д. Проверьте примеры на сайте jQuery

Выполнение этого таким образом позволило бы избежать проблемы закрытия и, вероятно, было бы более понятным для чтения.

Answer 2

Если вы используете jQuery, вы должны использовать jQuery.each () . Это универсальная функция итератора, которую можно использовать для бесшовной итерации как по объектам, так и по массивам.

Пример:

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