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

How to render JSON on a frontend html page

本文关键字：JSON 前端 html      更新时间：2023-09-26

我试图在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中时，它不能正常工作(不显示折叠)。

你可以使用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>

不久前我设计了所谓的可重复的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>

和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" },
    ];

然后从数据中渲染列表，你将这样做:

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