javascript - 使用jquery根据本地存储数据动态创建HTML分区

Question

我的本​​地存储中有以下 JSON。

userData:[{
           "name":"John",
           "dob":"2011-02-01",
           "gender":"male",
           "marital_status":"married",
           "email":"john@gmail.com"
          },
          {
           "name":"Paul",
           "dob":"2011-08-05",
           "gender":"male",
           "marital_status":"unmarried",
           "email":"paul@gmail.com"
          },
          {
           "name":"Mary",
           "dob":"2011-12-11",
           "gender":"female",
           "marital_status":"married",
           "email":"mary@gmail.com"
          }]

在上面的 JSON 中，我有 3 个用户，即:John、Paul 和 Mary，位于本地存储的“userData”数组中。用户数量可以>3或<3， 如何根据任何给定时间点存在的用户数量创建 HTML div(具有带删除按钮的用户图标)。我还执行删除用户操作，因此它本质上必须是动态的。我试图用 jquery 来实现这一点，但没有发现任何有用的东西。到目前为止，我已经尝试计算数组元素的数量，并基于此我显示或隐藏已在 HTML 中编码的 div(针对 4 个用户场景)

if(counter==4)
  {
    $("#avatar1").show();
    $("#avatar2").show();
    $("#avatar3").show();
    $("#avatar4").show();
}
  else if(counter==3)
  {
    $("#avatar1").show();
    $("#avatar2").show();
    $("#avatar3").show();
    $("#avatar4").hide();
  }
  else if(counter==2)
  {
    $("#avatar1").show();
    $("#avatar2").show();
    $("#avatar3").hide();
    $("#avatar4").hide();
  }
  else if(counter==1)
  {
    $("#avatar1").show();
    $("#avatar2").hide();
    $("#avatar3").hide();
    $("#avatar4").hide();
  }
  else{
  $("#container").html("<p>No Users found</p>");
  }

其中，counter=数组中元素的数量(在本例中为 userData)。 有没有办法动态地做到这一点，或者我完全错了，毫无意义？我不认为这是不可能的，但我只是想完成寻找解决方案的任务。

Answer 1

如果您想动态显示数据，请加载 json 并循环遍历该元素并附加到 html 文档。下面的链接中有一个示例。

https://jsfiddle.net/princedc/qwb2ubqx/1/

假设您有 id 为“userNames”的 div 标签，如下

<div id="userNames">
</div>

您可以加载 json 并循环它以创建动态页面元素并附加到上面的 div。这将满足 json 中任意数量的动态数据。

var jsonData = { userData:[{
           "name":"John",
           "dob":"2011-02-01",
           "gender":"male",
           "marital_status":"married",
           "email":"john@gmail.com"
          },
          {
           "name":"Paul",
           "dob":"2011-08-05",
           "gender":"male",
           "marital_status":"unmarried",
           "email":"paul@gmail.com"
          },
          {
           "name":"Mary",
           "dob":"2011-12-11",
           "gender":"female",
           "marital_status":"married",
           "email":"mary@gmail.com"
          }]
          };

(function (){ 
    for(var i=0; i < jsonData.userData.length;i++){
       $('#userNames').append('<div>'+ jsonData.userData[i].name + '</div>');
  }
})();