Question

我正在尝试在HTML页面上显示JSON字符串。 JSON字符串如下所示：

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

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>

必须自动添加HTML以确保所有JSON元素都填充在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：

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

上面的代码不显示崩溃结构。整个事物被包装到div class = people中的那一刻，它无法正常工作（不显示崩溃）。

Answer 1

你可以使用angular.js，是一个库来制作这类东西。很简单：

<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

前段时间我设计了所谓的可重复jQuery插件：https://github.com/c-smile/repeatable

所以如果你有这样的模板（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>

和数据

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 = $("ul#people").repeatable(); // declaring the repeatable
    list.value = data; // that's data population, sic!

这是demo。

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

2 个答案: