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では、私のローカルストレージ内の配列 'userData'内にJohn、Paul、Maryという3人のユーザーがいます。ユーザー数は、> 3または< 3, とすることができます。特定の時点で存在するユーザー数に基づいてHTML div（削除ボタン付きのユーザーアイコンを持つ）を作成するにはどうすればよいですか。私はまた、ユーザーの操作を削除しているので、それは本質的に動的でなければなりません。私はjqueryでこれを達成しようとしていますが、役に立たないものは何も見つかりませんでした。私はこれまで（4人のユーザーシナリオのために）私はすでに私のHTMLにコード化されているdivを示すか隠してること

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

、内の要素のカウンタ=数を配列要素をカウントしようとしたとに基づいています配列（この場合userData）。 これを動的に行う方法はありますか、まったく間違っていますか？私は不可能だとは思わないが、解決策を探している作業を完了しようとしているだけだ。

Answer 1

を使用すると、動的データが要素を通してJSONとループをロードして、HTMLドキュメントに追加表示したい場合。リンクの例は以下のリンクです。

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

あなたが動的ページ要素を作成し、上記のdivに追加することによってJSONとループをロードすることができ

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

以下のようにあなたは、ID「ユーザ名」での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 2

さてあなたはこれを試みることができる：

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