如何在前端HTML頁面上呈現JSON

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以確保HTML標記中填充了所有JSON元素。最簡單的方法是什么？ 有人可以幫我嗎？

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!

這是演示。

如何在前端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