2017-06-26 6 views
0

データループDIV

[{"id":"1","title":"science","added":"today","updated":"today","api":"25213","access":"0"} 
[{"id":"2","title":"commerce","added":"","updated":"","api":"","access":"0"}] 

コード

var data = 
      [{"id":"1","title":"science","added":"today","updated":"today","api":"25213","access":"0"}][{"id":"2","title":"commerce","added":"","updated":"","api":"","access":"0"}]; 


     var htmlText = ''; 

     for (var key in data) { 
      htmlText += '<div class="div-conatiner">'; 
      htmlText += '<p class="p-name"> Name: ' + data[key].title + '</p>'; 
      htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>'; 
      htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>'; 
      htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>'; 
      htmlText += '<p class="p-uname"> Username: ' + data[key].users_name + '</p>'; 
      htmlText += '</div>'; 
     } 

     $('body').append(htmlText); 

これはPHPの応答です。私はhtmlでこのデータをjsを使って何らかの形で表現したいと思っています

+3

データは有効なJSON文字列ではありません。 – RiggsFolly

答えて

0

あなたのコードにはいくつかの間違いがあります。 @ RiggsFollyは既にあなたのjsonが無効であると述べています。さらに、jsonオブジェクトとしてデータ文字列を解析する必要があります。このコードを見てください。

var data = '[{"id":"1","title":"science","added":"today","updated":"today","api":"25213","access":"0"},{"id":"2","title":"commerce","added":"","updated":"","api":"","access":"0"}]'; 
var htmlText = ''; 

var data = JSON.parse(data); 
for (var key in data) { 
    htmlText += '<div class="div-conatiner">'; 
    htmlText += '<p class="p-name"> Name: ' + data[key].title + '</p>'; 
    htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>'; 
    htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>'; 
    htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>'; 
    htmlText += '<p class="p-uname"> Username: ' + data[key].users_name + '</p>'; 
    htmlText += '</div>'; 
} 

$('body').append(htmlText); 

既にjQueryを使用しているので、jQueryスタイルでdivコンテナを作成することもできます。

var container = $('<div></div>').addClass('div-container'); 
関連する問題