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

Question

I've the following JSON in my local storage.

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"
          }]

In the above JSON I've 3 users namely:John,Paul and Mary within an array 'userData' in my local storage. The number of users can be >3 or <3, How can I create HTML divs(which has user icon with a delete button) based on number of users present at any given point of time. I'm also performing delete user operation and hence it has to be dynamic in nature. I'm trying to achieve this with jquery, but found nothing useful. I have so far tried to count the array elements and based on that I'm showing or hiding divs which are already coded in my HTML(for 4 users scenario)

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>");
  }

where, counter=number of elements in the array (userData in this case). Is there any way to do it dynamically or Am I totally wrong making no sense? I don't think it is impossible, but I'm just trying to complete the task searching for solutions.

Answer 1

Well you could try this:

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

If you want to dynamically show the data load the json and loop through the element and append to the html document. An example is in the link the link below.

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

Assume you have div tag with id "userNames" as below

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

you can load the json and loop through it to create dynamic page element and append to the above div. This will cater to any number of dynamic data in the 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

Here's a solution that does everything that you want.

Creates a user avatar with their name next to it and a button.

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