JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://github.com/douglascrockford/JSON-js/raw/8e0b15cb492f63067a88ad786e4d5fc0fa89a241/json2.js"></script>
<input type="button" id="stop" value="Stop" />
<div id="news">
</div>
<script id="newsTemplate" type="text/html">
{{each News}}
<h2>${headline}</h2>
<p>${body}</p>
{{/each}}
</script>
JavaScript
function showNews() {
//This is only needed for jsFiddle
//Create a javascript object literal
var news = {
News: [
{
headline: "News 1",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi leo, interdum ut sagittis non, interdum sed libero. Cras condimentum tellus sit amet nisl laoreet ultricies. Mauris mi leo, euismod sed tempus vel, molestie vel enim. Donec molestie orci non enim venenatis molestie."},
{
headline: "News 2",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi leo, interdum ut sagittis non, interdum sed libero. Cras condimentum tellus sit amet nisl laoreet ultricies. Mauris mi leo, euismod sed tempus vel, molestie vel enim. Donec molestie orci non enim venenatis molestie."}
]
};
/*
JSON.stringify built in function to IE9+ / FireFox / Chrome browsers that
converts JavaScript Object Literals into JSON. Include JSON2.js for all others found at
https://github.com/douglascrockford/JSON-js/blob/master/json2.js
*/
/*
Replace this with a
$.getJSON('url.php', function(result) {
$("<div>").html($("#newsTemplate").tmpl(result))
.appendTo("#news")
.hide()
.slideDown("slow");
});
*/
$.post('/echo/json/', {
"json": JSON.stringify(news)
}, function(result) {
//Result from Server
$("<div>").html($("#newsTemplate").tmpl(result)).appendTo("#news").hide().slideDown("slow");
});
/*
In url.php
http://www.php.net/manual/en/function.json-encode.php
<?php
class A {
public $a = 1;
public $b = 2;
public $collection = array();
function __construct(){
for ( $i=3; $i-->0;){
array_push($this->collection, new B);
}
}
}
class B {
...