Question

"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

Answer 1

这个怎么样？

   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

Answer 2

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

Answer 3

试试这个：

    ...
    bmp2.EndInit()
    bmp2.Freeze();    // <== added

小提琴：uses a set

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

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

3 个答案: