如何在json數據在數組中顯示json數據

"data": [ 
    { 
    "name": "Rehan", 
    "location": "Pune", 
    "description": "hello hi", 
    "created_by": 13692, 
    "users_name": "xyz", 
    }, 
    { 
     "name": "Sameer", 
     "location": "Bangalore", 
     "description": "how are you", 
     "created_by": 13543, 
     "users_name": "abc", 
    },

API包含超過100個數據，因此我們如何在html頁面中顯示這些數據。像這樣：如何在json數據在數組中顯示json數據

Name: Rehan 
location: Pune 
Description: hello hi 
created by: 13692 
user name: xyz

來源

2015-04-23 Mohammad Iqbal

您需要使用循環並將所需的HTML元素附加到DOM。 –

如何將HTML元素附加到DOM。其實我是新手顯示json的數據 –

研究一些教程...他們很多在線。請仔細閱讀關於如何使用本網站的幫助部分 – charlietfl

如何對這個？

var data = [ 
        { 
        "name": "Rehan", 
        "location": "Pune", 
        "description": "hello hi", 
        "created_by": 13692, 
        "users_name": "xyz", 
        }, 
        { 
         "name": "Sameer", 
         "location": "Bangalore", 
         "description": "how are you", 
         "created_by": 13543, 
         "users_name": "abc", 
        }, 
       ] 

      var htmlText = ''; 

      for (var key in data) { 
       htmlText += '<div class="div-conatiner">'; 
       htmlText += '<p class="p-name"> Name: ' + data[key].name + '</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);

這將輸出到：

Name: Rehan 
Location: Pune 
Description: hello hi 
Created by: 13692 
Username: xyz 

Name: Sameer 
Location: Bangalore 
Description: how are you 
Created by: 13543 
Username: abc

來源

2015-04-23 09:29:40 Eddie

感謝您美妙的輸出@Eddie誰做什麼。但是當我想爲每個元素分配id屬性時該怎麼辦？ –

抱歉，我忘了提及json api數據上的圖片網址。還有一個圖像需要顯示時該怎麼辦。「image」：「https://rajpurohit.s3-us-west-2.amazonaws.com/images/75467_20150423054427.jpg」， –

@MohammadIqbal，你是說如果你想添加'id'屬性例如？ – Eddie

假設你有id爲#table，環表通過JSON對象並附加一排中的每個對象項目：

var jsonObj = { ... } 

for (i in jsonObj) { 
    for (n in jsonObj[i]) { 
     $('#table > tbody').append('<tr><th>' + n + '</th><td>' + jsonObj[i][n] + '</td></tr>'); 
    } 
}

var data = [ 
 
    { 
 
    "name": "Rehan", 
 
    "location": "Pune", 
 
    "description": "hello hi", 
 
    "created_by": 13692, 
 
    "users_name": "xyz", 
 
    }, 
 
    { 
 
     "name": "Sameer", 
 
     "location": "Bangalore", 
 
     "description": "how are you", 
 
     "created_by": 13543, 
 
     "users_name": "abc", 
 
    }]; 
 

 

 
for (i=0;i<=data.length;i++) { 
 
    for (n in data[i]) { 
 
     $('#table > tbody').append('<tr><th>' + n + '</th><td>' + data[i][n] + '</td></tr>'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tbody> 
 
    </tbody> 
 
</table>

來源

2015-04-23 09:27:46 kapantzak

感謝您的回覆，但我想在div中顯示該數據而不是表格。 –

我必須顯示以下格式的數據：

Name Location Description created by username

–

所以，而非行，只是追加申報單或跨度 – kapantzak

試試這個：

<div id="json"></div> 
<script> 
     var obj = {"data": [ 
{ 
"name": "Rehan", 
"location": "Pune", 
"description": "hello hi", 
"created_by": 13692, 
"users_name": "xyz", 
}, 
{ 
    "name": "Sameer", 
    "location": "Bangalore", 
    "description": "how are you", 
    "created_by": 13543, 
    "users_name": "abc", 
} 
]} 
var divId = document.getElementById("json") 
for(var i=0;i<obj.data.length;i++) 
for(var keys in obj.data[i]){ 
console.log(keys +"-->"+obj.data[i][keys]); 
divId.innerHTML = divId.innerHTML + "<br/>"+ keys +"-->"+obj.data[i][keys]; 
} 
</script>

小提琴：http://jsfiddle.net/Sourabh_/1m2tjth3/

您可以修改此按您的要求。

來源

2015-04-23 09:33:15 Zee

如何在json數據在數組中顯示json數據

回答

相關問題