[英]How to render JSON on a frontend html page
我正在尝试在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中的那一刻,它不能正常工作(不显示崩溃)。
您可以使用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>
和数据
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!
这是演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.