It's an embarrassing story, but I'm making a sample page that displays a tree with the data acquired from the API and leaves it as data on the screen. Please help us with your advice (source code). The environment etc. are listed at the bottom. Here's what we want to achieve:
Json data ⇒ Get and display the tree (initial display) ⇒ Buttons in the tree (plus button etc.) ⇒ Get the target Json data again ⇒ Display the acquired data anywhere on the screen When the button is pressed Show only
-Bookstore
- BOOK
One Piece ☑️
＋ Hotel
＋ Electricity
＋ Greengrocer
Display button
Display location[one piece]
Display the information of the checked part in any place in HTML (thymeleaf). The displayed content is called One Piece in the image, and I want to bring the number of pages together behind the scenes.
I can't get Json by linking with Ajax and Java and display the tree. If it can be realized, either Ajax or Java can be used, but the current situation is that I do not know how to display Json as a tree and I do not know how to call Json data again with the plus button.
@Service
public class ZipCodeService {
@Autowired
@Qualifier("zipCodeSearchRestTemplate")
RestTemplate restTemplate;
/**Sample search API request URL*/
private static final String URL = "http://zipcloud.ibsnet.co.jp/api/search?zipcode={zipcode}";
public ZipCodeDto service(String zipcode) {
return restTemplate.getForObject(URL, ZipCodeDto.class, zipcode);
}
}
@Controller
public class ZipCodeController {
@Autowired
ZipCodeService zpcService;
/**
*Sample input form
* @return "zipcode"
*/
@RequestMapping("/zipcode")
public String zipcodeForm(HttpSession session, Model model) {
return "zipcode";
}
/**
*Sample information display
* @return "zipcode-confirm"
*/
@RequestMapping(value="/zipcode/confirm", method=RequestMethod.POST)
public String zipcodeConfirm(HttpSession session, Model model,
@RequestParam("zipcode") String zipcode){
//Only mandatory check, number / digit check omitted
//If null or empty string, display an error message on the input form
if (zipcode == null || zipcode.equals("")) {
model.addAttribute("errorMessage", "Please enter your zip code.");
return zipcodeForm(session, model);
}
//Sample search API service call
ZipCodeDto zipCodeDto = zpcService.service(zipcode);
//Expand and display the list with thymeleaf
model.addAttribute("zipcodeList", zipCodeDto.getResults());
return "zipcode-confirm";
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Installation sample</title>
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/treeview.css?_yuiversion=2.4.1" />
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/tree.css?_yuiversion=2.4.1" />
<script type="text/javascript" src="/content/lib/yui/build/yahoo/yahoo.js?_yuiversion=2.4.1"></script>
<script type="text/javascript" src="/content/lib/yui/build/event/event.js?_yuiversion=2.4.1"></script>
<script type="text/javascript" src="/content/lib/yui/build/treeview/treeview.js?_yuiversion=2.4.1"></script>
<style type="text/css">
* {
margin:0; padding:0;
}
body{
margin:0 auto; padding:0;
background-color:#666;
color:#666;
font:81%/1.5 verdana,sans-serif;
text-align:center;
}
#wrap {
width:500px;
margin:0 auto; padding:0;
background-color:#fff;
text-align:center;
}
#content {
margin:0 20px; padding:0;
text-align:left;
}
#footer {
margin:1em 0 0 0; padding:.2em .5em;
background-color:#999;
color:#fff;
font-size:78%;
text-align:right;
}
#footer * {
font-style:normal;
font-size:100%;
color:#fff;
}
h1 {
margin:0 0 1em 0; padding:.5em 1em;
background-color:#999;
color:#fff;
font-size:100%;
text-align:left;
}
h1 a {
color:#fff;
}
p {
margin:1em 0; padding:0;
}
img {
border:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Installation sample</h1>
<p>reference:<a href="http://developer.yahoo.com/yui/examples/treeview/folder_style.html">YUI Library » Tree View Control » Folder-Style TreeView Design</a></p>
<div id="content">
<p>
<a id="expand" href="#">Expand all</a> |
<a id="collapse" href="#">Collapse all</a>
</p>
<div id="treeDiv1"></div>
<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
var tree; //will hold our TreeView instance
function treeInit() {
YAHOO.log("Example's treeInit function firing.", "info", "example");
//Hand off ot a method that randomly generates tree nodes:
buildRandomTextNodeTree();
//handler for expanding all nodes
YAHOO.util.Event.on("expand", "click", function(e) {
YAHOO.log("Expanding all TreeView nodes.", "info", "example");
tree.expandAll();
YAHOO.util.Event.preventDefault(e);
});
//handler for collapsing all nodes
YAHOO.util.Event.on("collapse", "click", function(e) {
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
tree.collapseAll();
YAHOO.util.Event.preventDefault(e);
});
}
//This method will build a TreeView instance and populate it with
//between 3 and 7 top-level nodes
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
//create top-level nodes
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
//we'll delegate to another function to build child nodes:
buildRandomTextBranch(tmpNode);
}
//once it's all built out, we need to render
//our TreeView instance:
tree.draw();
}
//This function adds a random number <4 of child nodes to a given
//node, stopping at a specific node depth:
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
//When the DOM is done loading, we can initialize our TreeView
//instance:
YAHOO.util.Event.onDOMReady(treeInit);
})();//anonymous function wrapper closed; () notation executes function
</script>
</div><!-- div#wrap/div#content -->
</div><!-- div#wrap -->
</body>
</html>
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . ajax( {
url: 'jquery-sample-ajax-json.php',
dataType: 'json',
data: {
year: '2011',
month: '11',
day: '25'
},
success: function( data ) {
jQuery . each( data, function( key, value ) {
jQuery( '#jquery-sample-ajax' ) . append( '<p>' + key + ': ' + value + '</p>' );
} );
jQuery( '#jquery-sample-textStatus' ) . text( 'Read successfully' );
},
error: function( data ) {
jQuery( '#jquery-sample-textStatus' ) . text( 'Read failure' );
}
} );
},
function() {
jQuery( '#jquery-sample-ajax' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
{
"book1":{
"title": "Book",
"year": 2005 ,
"page": 399
},
"book2":{
"title": "one piece",
"year": 2006 ,
"page": 650
}
}
STS、SpringBoot、Java8,Javascript、HTML、Timeleaf
Recommended Posts