2016-05-23 8 views
0

forループを使用してhtml divに表示するjsonデータがあります。私のコントロールはループでは入力できますが、HTML divにデータを追加して表示することはできません。コントロールはループに入っていますが、HTML divにデータを追加して表示していません

json data;

[{"id":"15","FirstName":"ranjan","MiddleName":"","LastName":"","Gender":"","Location":"r","Email":"[email protected]","Mobile":""},{"BookTitle":"","BookGenre":"","BookWriter":"","BookDescription":""}] 

コード;

$.getJSON(url, function(data) { 
      console.log(data); 
      if (data) { 

       alert("hey got the data" + JSON.stringify(data)); 
       for (var i = 0; i < data.length; i++) { 
        alert("entered"); 
        alert("hey got the data" + JSON.stringify(data[1])); 
        var $appendData = 
         $('<div id="' + data[i].id + '">' + '<p>' 
         + 'FirstName:' + data[i].data.FirstName + '<br/>' 
         + 'MiddleName:' + data[i].data.MiddleName + '<br/>' 
         + 'LastName:' + data[i].data.LastName + '<br/>' 
         + 'Gender:' + data[i].data.Gender + '<br/>' 
         + 'Location:' + data[i].data.Location + '<br/>' 
         + 'Email:' + data[i].data.Email + '<br/>' 
         + 'Mobile:' + data[i].data.Mobile + '<br/>' 
         + '</p>' + '</div>').appendTo('#postjson'); 
       } 
      } else { 
       return; 
      } 

が//これは、単に置き換える私のdiv

</script> 
     <div class="grid" id="postjson"></div> 
     </div> 
</div> 
+0

'$ $ appendData ='を削除してみてください – Thamilan

答えて

1

あなたのループにタイプミスを持っているすべてのあなたのdata[i].data.propertydata[i].property

Javascriptを

$.getJSON(url,function(data) { 

        console.log(data); 
         if(data){ 

          alert("hey got the data"+JSON.stringify(data)); 
          for(var i=0; i<data.length; i++) { 
            alert("entered"); 
            alert("hey got the data"+JSON.stringify(data[1])); 

             $('<div id="'+data[i].id+'">' 
             +'<p>' 
             +'FirstName:'+data[i].FirstName+'<br/>' 
             +'MiddleName:'+data[i].MiddleName+'<br/>' 
             +'LastName:'+data[i].LastName+'<br/>' 
             +'Gender:'+data[i].Gender+'<br/>' 
             +'Location:'+data[i].Location+'<br/>' 
             +'Email:'+data[i].Email+'<br/>' 
             +'Mobile:'+data[i].Mobile+'<br/>' 
             +'</p>' 
             +'</div>').appendTo('#postjson'); 




            } 



           } 
         else { 
          return;    
         } 

JsFiddle

関連する問題