Acquisition of JSON data and rotation of values

Premise / What you want to achieve

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

image

-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.

Problems / error messages that are occurring

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.

Corresponding source code

@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 &raquo; Tree View Control &raquo; 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( '' );
        }
    );
} );

Target JSON data

{
 "book1":{
"title": "Book",
 "year": 2005 ,
"page": 399
},
"book2":{
 "title": "one piece",
 "year": 2006 ,
"page": 650
 }
}

Supplementary information (language / FW / version of tools, etc.)

STS、SpringBoot、Java8,Javascript、HTML、Timeleaf

Recommended Posts

Acquisition of JSON data and rotation of values
[Ruby] Arguments with keywords and default values of arguments
Compatibility of Spring JDBC and MyBatis with Spring Data JDBC (provisional)
Until the use of Spring Data and JPA Part 1
Window aggregation of sensor data with Apache Flink and Java 8
[jackson] I want to receive JSON values "0" and "1" as boolean
Create API to send and receive Json data in Spring