Javascript 当json数据位于数组中时，如何在div中显示json数据

我试图在我的应用程序页面中显示作为Ajax回调接收的数据。数据有点像这样：

"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",
    },

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

API包含100多个数据，那么我们如何在html页面中显示这些数据呢。像这样：

"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",
    },

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

编辑

---

或者，如注释/解决方案中所建议的，如何将数据显示为HTML表格？

假设您有一个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 jsonObj={…}
对于（我在jsonObj中）{
对于（jsonObj[i]中的n）{
$（'#table>tbody'）.append（'+n+'+jsonObj[i][n]+''）；
}
}

var数据=[
{
“姓名”：“热汉”，
“地点”：“浦那”，
“描述”：“你好，你好”，
“创建人”：13692，
“用户名称”：“xyz”，
},
{
“名称”：“Sameer”，
“地点”：“班加罗尔”，
“描述”：“你好”，
“创建人”：13543，
“用户名称”：“abc”，
}];
对于（i=0；i您可以使用
for
循环遍历数组并构造HTML字符串。使用
jQuery
的
.append（）
将字符串添加到正文中


var数据=[{
“姓名”：“热汉”，
“地点”：“浦那”，
“描述”：“你好，你好”，
“创建人”：13692，
“用户名称”：“xyz”，
},
{
“名称”：“Sameer”，
“地点”：“班加罗尔”，
“描述”：“你好”，
“创建人”：13543，
“用户名称”：“abc”，
},
]
var htmlText=''；
for（var输入数据）{
htmlText+=''；
htmlText+='
名称：'+data[key].name+'
'；
htmlText+='
位置：'+data[key]。位置+'
'；
htmlText+='
说明：'+data[key].说明+'
'；
htmlText+='
创建人：'+data[key]。创建人+'
；
htmlText+='
用户名：'+data[key]。用户名称+'
；
htmlText+=''；
}
$（'body'）.append（htmlText）；
.div conatiner{
背景色：#eeeeee；
边缘底部：5px；
填充物：5px；
}
.div conatiner p{
边际：0px；
}
试试这个：

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


var obj={“数据”：[
{
“姓名”：“热汉”，
“地点”：“浦那”，
“描述”：“你好，你好”，
“创建人”：13692，
“用户名称”：“xyz”，
},
{
“名称”：“Sameer”，
“地点”：“班加罗尔”，
“描述”：“你好”，
“创建人”：13543，
“用户名称”：“abc”，
}
]}
var divId=document.getElementById（“json”）
对于（var i=0；iYou需要使用循环并将所需的HTML元素附加到DOM。如何将HTML元素附加到DOM。实际上，我是显示jsonStudy数据的新手。一些教程…很多都是在线的。请阅读有关如何使用此网站的帮助部分感谢您的回复，但我不想在div中显示这些数据在表中。我必须以以下格式显示该数据：名称位置描述由用户名创建，因此，只需附加div或span，而不是行。请告诉我当我有图像数据时该怎么做。另一方面，分割数据是一个列表（从queryset转换而来）我得到的是Ajax回调。它有两个字段：距离和速率。使用您的解决方案几乎可以得到我想要的，除了第二个字段值作为一个新项出现（即数据不是出现在一行中而是出现在两个单独的行中-一行接一行）。我的数据看起来像这样（被截断）：[（2，Decimal（'1'），Decimal（'20.85'）、（3，十进制（'101'）、十进制（'21.55'）、（4，十进制（'106'）、十进制（'22.23'））、…]。我如何设计循环以获得同一行中的两个字段值？感谢您的出色输出@Eddie who。但是，当我要为每个元素分配id属性时，该怎么办？很抱歉，我忘了提及json api数据上的图像url。如果还有图像要显示，该怎么办。“图像”：“，@MohammadIqbal，你的意思是，如果你想添加'id'属性，例如？是的，你是对的。我必须为css使用id属性，还必须将div的值作为parameter@MohammadIqbal请检查更新的代码。我为css添加了类属性