APIの情報をうまく画面表示と制御で表したい。

###前提・実現したいこと
JavaとThyme leafでシンプルな駅指定画面などを作りたいと思っています。

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

☑️埼玉県▼
☑️千葉県▼
☑️東京都▲　
          ☑️千代田区▲
           　　 　　　　☑️有楽町▲
                          ☑️３丁目
          ☑️豊島区▼
　　　　　　　・
　　　　　　　・
　　　　　　　・
☑️神奈川県▼
　　　・
　　　・
　　　・
　　　・

のように＋ボタンを押下した際に区や町番地などが表示されるように実現したいのですが、▼ボタンと▲ボタンの処理と桁数で表示内容を制御して（表示させないなど）行く方法にて悩んでいます。色々と調べてはいるのですが、中々合点のいくものが見つからないので今回こちらにて質問してみました。
どうか、お知恵をお貸しください。

＊制御箇所　桁数が仮に５桁の場合、東京都までしか表示されず区や町番地等は表示されない。
イメージ的には▼ボタン押下のタイミングでAPIを呼び桁数に対応する表示項目のみをだす的なのができそうな甘い考えではいます。
###現状
APIを使用して、一旦都県市区町村等取得自体はできる状態です。
###APIの中身
都県市区町村の全情報
桁数（４桁、１０桁、１９桁）

html
1<wj-tree-view control="tvChk"
2    items-source="items"
3    display-member-path="'header'"
4    child-items-path="'items'"
5    show-checkboxes="true"
6    checked-items-changed="checkedItems(tvChk)">
7</wj-tree-view>
8<button id="btnCheckAll" class="btn btn-default" ng-click="tvChk.checkAllItems(true);">
9    すべてチェック
10</button>
11<button id="btnUncheckAll" class="btn btn-default" ng-click="tvChk.checkAllItems(false);">
12    すべてチェック解除
13</button>
14    
15<button id="btnSaveState" class="btn btn-default" ng-click="saveCheckedItems(tvChk)">
16    状態を保存
17</button>
18<button id="btnRestoreState" class="btn btn-default" ng-click="restoreCheckedItems(tvChk)">
19    状態を復元
20</button>
21<br/>
22<div id="tvChkStatus" ng-bind-html="tvChkStatusStr">
23</div>

js
1var Thread = {};
2 
3jQuery.noConflict();
4(function($) {
5 "use strict";
6 Thread.Ctrl = function($scope) {
7 $scope.root = [];
8 };
9 
10 kintone.events.on("app.record.index.show", function(e) {
11 var records = {};
12 var root = [];
13 kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
14 'app': kintone.app.getId()}).then(function(resp) {
15 resp.records.forEach(function(record) {
16 records[record.id.value] = {
17 id: record.id.value,
18 parent: record.parent.value,
19 subject: record.subject.value,
20 body: record.body.value,
21 children: []
22 };
23 });
24 for (var id in records) {
25 var record = records[id];
26 if (!record.parent) {
27 root.push(record);
28 } else if (records[record.parent]) {
29 records[record.parent].children.push(record);
30 }
31 }
32 
33 // スコープを取得
34 var scope = angular.element(document.querySelector('#thread')).scope();
35 
36 scope.$apply(function(){
37 scope.root = root;
38 });
39 });
40 });
41})(jQuery);

###わからない箇所
1.APIのデータ内容をツリー表示にする方法。
2.API取得時の桁数で表示非表示の制御(Java？,JS？)
例：▲ボタンを押した時特定の桁数の情報を取得し表示する。
4桁の場合東京都までしか表示できず、町や市が入らないで非表示なる。
１０桁の場合東京都選択矢印千代田区まで表示可能

###補足情報(言語/FW/ツール等のバージョンなど)
Java8、STS、JS、HTML、CSS