如何在前端HTML页面上呈现JSON

Question

I am trying to display a JSON string on a HTML page. 我正在尝试在HTML页面上显示JSON字符串。 The JSON string looks like this: JSON字符串如下所示：

{ 
       email: '111@11.com',
       username: '1111',
       roles: {},
       array: ['data','data'] },
     { 
       email: 'go@1.com',
       username: 'go',
       roles: {},
       array: [ 'c', 'c' ] } ]

The HTML is like this: HTML是这样的：

<div id="my_id">
    <h3>json.email1</h3>
    <div>
      <div class="content">
        <p>json.array1</p>
      </div>
    </div>
<h3>json.email2</h3>
    <div>
      <div class="content">
        <p>json.array2</p>
      </div>
    </div>
<h3>json.email3</h3>
    <div>
      <div class="content">
        <p>json.array3</p>
      </div>
    </div>     
  </div>

The HTML has to be automatically added to make sure all the JSON elements are populated in the HTML tags.What would be the easiest way to do this? 必须自动添加HTML以确保HTML标记中填充了所有JSON元素。最简单的方法是什么？ Could someone please help me out? 有人可以帮我吗？

HTML: HTML：

<div>
   <div id="people">
      <h3><a href="mailto:{{this.email}}">{{this.name}}</a></h3>
      <div>
         <div class="content">
            <p>This example simply sets a class attribute to the details and let's an
               external stylesheet toggle the collapsed state.
            </p>
         </div>
      </div>
      <script>
         var data = [
         { name: "Olga", age: 20, email: "aaa@example.com" },
         { name: "Peter", age: 30, email: "bbb@example.com" },
         { name: "Ivan", age: 15, email: "ccc@example.com" },
         ];
         var list = $("div#people").repeatable(); // declaring the repeatable
         list.value = data; // that's data population, sic!
      </script>
   </div>
</div>

HTML : HTML：

   <div class="people">
    <h3>Foe</h3>
    <div>
      <div class="content">
        <p>This example simply sets a class attribute to the details and let's an
        external stylesheet toggle the collapsed state.</p>
      </div>
    </div>
    </div>

The above code does not display the collapse structure. 上面的代码不显示折叠结构。 The moment the entire thing is wrapped into the div class=people, it does not work correctly(does not show the collapse ). 将整个东西包装到div class = people中的那一刻，它不能正常工作（不显示崩溃）。

Answer 1

You can use angular.js, is a library to make this kind of things. 您可以使用angular.js，这是一个制作此类内容的库。 Is pretty simple: 很简单：

<html ng-app="myapp">
<body ng-controller="mycontroller">
    <div ng-repeat="user in users">
        <h3>{{ user.email }}</h3>
        <p>{{ user.username }}</p>
        <div ng-repeat="data in array">
             {{ data }}
        </div>
   </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script>
     var app = angular.module('myapp', []);
     app.controller = ('mycontroller', function($scope){
           $scope.users = {
                //your data here
           }
     });
</script>
<body>
</html>

Answer 2

While ago I've designed so called repeatable jQuery plugin: https://github.com/c-smile/repeatable 前一段时间，我设计了所谓的可重复jQuery插件： https : //github.com/c-smile/repeatable

So if you have template (html fragment) like this: 因此，如果您有这样的模板（html片段）：

<ul id="people">
    <li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li> 
    <li>No data available</li>
</ul>

and data 和数据

var data = [
       { name: "Olga", age: 20, email: "aaa@example.com" },
       { name: "Peter", age: 30, email: "bbb@example.com" },
       { name: "Ivan", age: 15, email: "ccc@example.com" },
    ];

Then to render list from that data you will do just this: 然后要从该数据呈现列表，您将执行以下操作：

var list = $("ul#people").repeatable(); // declaring the repeatable
    list.value = data; // that's data population, sic!

Here is the demo . 这是演示。

如何在前端HTML页面上呈现JSON

问题描述

2 个解决方案

解决方案1
0 2014-08-08 03:55:27

解决方案2
0 2014-08-08 04:04:36

如何在前端HTML页面上呈现JSON

问题描述

2 个解决方案

解决方案1 0 2014-08-08 03:55:27

解决方案2 0 2014-08-08 04:04:36

解决方案1
0 2014-08-08 03:55:27

解决方案2
0 2014-08-08 04:04:36