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

How to display json data in a div when json data is in array

提问by Mohammad Iqbal

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

The API contain more than 100 data, so how can we display these data in a html page. like this:

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

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

回答by Eddie

You can use forto loop thru the array and contruct an HTML string. Use jQuery's .append()to add the string to the body.

您可以使用for循环遍历数组并构造一个 HTML 字符串。使用jQuery's.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>

UPDATE:Another option is using mapto loop thru the array and use Template literalsto construct the HTML

更新：另一种选择是使用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>

回答by kapantzak

Assuming you have a table with id #table, loop through the json object and append a row for every object item:

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

回答by Zee

Try this:

尝试这个：

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

Fiddle : http://jsfiddle.net/Sourabh_/1m2tjth3/

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

You can modify this as per your requirement.

您可以根据您的要求修改它。