使用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

好吧，你可以試試這個：

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/

假設您具有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>');
  }
})();

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