How to render JSON on a frontend html page
Question
I am trying to display a JSON string on a HTML page. The JSON string looks like this:
{
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:
<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? Could someone please help me out?
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>
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 ).
2 answers
solution1
0 2014-08-08 03:55:27
You can use angular.js, is a library to make this kind of things. 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>
solution2
0 2014-08-08 04:04:36
While ago I've designed so called repeatable jQuery plugin: https://github.com/c-smile/repeatable
So if you have template (html fragment) like this:
<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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.