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

你可以试试这个：

function ShowAvatars(number) {
    var counter = 1;
    if (number === 0) {
        $("#container").html("<p>No Users found</p>");
    } else {
        for (var i = 1; i <= 4; i++) {
            if (counter <= number) {
                $("#avatar" + i).show();
            } else {
                $("#avatar" + i).hide();
            }
            counter++;
        }
    }
}

Answer 2

如果要动态显示数据加载json并循环遍历该元素并附加到html文档。一个例子是链接下面的链接。

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

假设您的div标签带有id＆＃34; userNames＆＃34;如下

<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>');
  }
})();

Answer 3

这是一个能够完成你想要的一切的解决方案。

创建一个用户头像，旁边有一个名字和一个按钮。

data.forEach((user) => {
        var row = document.createElement('div');
        row.classList.add('row');

        var outerpanel = document.createElement('div');
        outerpanel.classList.add('panel');
        outerpanel.classList.add('panel-default');
        outerpanel.style.marginTop = '5%';

        var panelbody = document.createElement('div');
        panelbody.classList.add('panel-body');

        var innerpanel = document.createElement('div');
        innerpanel.classList.add('row');
        innerpanel.innerHTML = `
            <img src="https://api.adorable.io/avatars/285/abott@adorable.png" height="50px" width="100px"/>
            <div style="vertical-align:middle; display:inline-block; padding-left: 10px; padding-right: 20px; padding-top: 10px; font-weight: bold;">
              ${user.name}
            </div>
            <div class="btn btn-xs btn-danger" style="vertical-align:middle; color:#FFF; font-weight:bold; line-height:25px;"> X </div>
        `;

        panelbody.append(innerpanel);
        outerpanel.append(panelbody);
        row.append(outerpanel);

        document.getElementById('user-container').append(outerpanel);
      });

http://plnkr.co/edit/P0asYI7fSHqDjeq4ymK9?p=preview

使用jquery基于本地存储数据动态创建HTML分区

3 个答案: