当json数据在数组中时，如何在div中显示json数据 [英] How to display json data in a div when json data is in array

问题描述

"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页面中。像这样：

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

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

推荐答案

这个怎么样？

   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

这篇关于当json数据在数组中时，如何在div中显示json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！