当json数据在数组中时如何在div中显示json数据[关闭]

Question

我正在尝试在我的应用页面中显示作为 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",
    },

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

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

编辑

或者，如 cmets / Solutions 中所建议，如何将 数据 显示为 HTML 表格？

Answer 1

您可以使用for 循环遍历数组并构造 HTML 字符串。使用jQuery 的.append() 将字符串添加到正文中。

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

.div-conatiner {
  background-color: #eeeeee;
  margin-bottom: 5px;
  padding: 5px;
}

.div-conatiner p {
  margin : 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更新：另一种选择是使用 map 循环遍历数组并使用 Template literals 构造 HTML

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 = data.map(function(o){
  return `
      <div class="div-conatiner">
      <p class="p-name"> Name: ${o.name}</p>
      <p class="p-loc"> Location: ${o.location}</p>
      <p class="p-desc"> Description: ${o.description}</p>
      <p class="p-created"> Created by: ${o.created_by}</p>
     <p class="p-uname"> Username: ${o.users_name}</p>
     </div>
  `;
});

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

.div-conatiner {
  background-color: #eeeeee;
  margin-bottom: 5px;
  padding: 5px;
}

.div-conatiner p {
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

试试这个：

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

您可以根据自己的需要进行修改。

Answer 3

假设您有一个 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>