如何在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

您需要使用循环并将所需的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

感谢您美妙的输出@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>

感谢您的回复，但我想在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/

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

如何在json数据在数组中显示json数据

相关推荐