

### 前提・実現したいこと

我ながらお恥ずかしい話ですが、APIから取得するデータでツリー表示をさせ、画面上にデータとして残すようなページをサンプルで作っています。  
どうか皆様のアドバイス（ソースコード）などのお力添えをお願いいたします。  
環境等は最下部に記載しています。  
以下が実現したいことです。

Jsonデータ ⇒ 取得してツリー表示（初期表示） ⇒ ツリー内のボタン（プラスボタンなど） ⇒対象のJsonデータを再度取得 ⇒
取得したデータを画面上の任意の箇所に表示ボタンが押された場合にのみ表示

### イメージ

[code]

    -書店
    　- BOOK
    　　　ワンピース☑️
    ＋ホテル
    ＋電気
    ＋八百屋
    
    
    　 　　　　　　　　　　　　　　　表示ボタン
    
    
    表示場所[ワンピース]
    
[/code]

チェック箇所の情報をHTML(thymeleaf)内の任意の場所に表示する。  
表示内容はイメージのとこにあるワンピースという名称でページ数などは裏で結びついて持っていきたい。

### 発生している問題・エラーメッセージ

AjaxとJavaでの連携でJsonを取得して、ツリー表示できない。  
実現できるなら、AjaxでもJavaでもどちらでもいいのですが、Jsonをツリー表示するのがわからなく、プラスボタンで再度Jsonデータを呼びに行く方法がわからないという現状です。

### 該当のソースコード

**Java**

[code]

    @Service
    public class ZipCodeService {
    
        @Autowired
        @Qualifier("zipCodeSearchRestTemplate")
        RestTemplate restTemplate;
    
        /** サンプル検索API リクエスト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);
        }
    
    }
    
[/code]

**java**

[code]

    @Controller
    public class ZipCodeController {
    
        @Autowired
        ZipCodeService zpcService;
    
        /**
         * サンプル入力フォーム
         * @return "zipcode"
         */
        @RequestMapping("/zipcode")
        public String zipcodeForm(HttpSession session, Model model) {
            return "zipcode";
        }
    
        /**
         * サンプル情報表示 
         * @return "zipcode-confirm"
         */
        @RequestMapping(value="/zipcode/confirm", method=RequestMethod.POST)
        public String zipcodeConfirm(HttpSession session, Model model, 
                                     @RequestParam("zipcode") String zipcode){
    
            // 一応必須チェックのみ 数字・桁数チェックは省略
            // nullまたは空文字の場合、入力フォームにエラーメッセージを表示
            if (zipcode == null || zipcode.equals("")) {
                model.addAttribute("errorMessage", "郵便番号を入力してください。");
                return zipcodeForm(session, model);
            }
    
            // サンプル検索APIサービス呼び出し
            ZipCodeDto zipCodeDto = zpcService.service(zipcode);
            // thymeleafでリストを展開して表示する
            model.addAttribute("zipcodeList", zipCodeDto.getResults());
            return "zipcode-confirm";   
        }
    }
    
[/code]

**HTML**

[code]

    <!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>設置サンプル</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>設置サンプル</h1>
                <p>参照：<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>
    
[/code]

**js**

[code]

    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( '読み込み成功' );
                    },
                    error: function( data ) {
                        jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
                    }
                } );
            },
            function() {
                jQuery( '#jquery-sample-ajax' ) . html( '' );
                jQuery( '#jquery-sample-textStatus' ) . text( '' );
            }
        );
    } );
    
[/code]

### 対象のJSONデータ

**Json**

[code]

    {
     "book1":{
    "title": "Book",
     "year": 2005 ,
    "page": 399
    },
    "book2":{
     "title": "ワンピース",
     "year": 2006 ,
    "page": 650
     }
    }
    
[/code]

### 補足情報(言語/FW/ツール等のバージョンなど)

STS、SpringBoot、Java8,Javascript、HTML、Timeleaf


CC BY-SA 3.0
2017-12-02T15:28:43.017
39984
2017-12-02T15:52:45.247
2017-12-02T15:52:45.247
26459
26459
question
javascript java json ajax thymeleaf
Jsonデータの持ち回りと値の受け渡しについて