【JSON】クリックしたらJSONデータからhtmlを生成する方法

今回はJSONデータからhtmlを生成させる方法を紹介します。

JSONの書き方については以前の記事でも紹介しています。

JSONデータからhtmlを生成する方法
1. html
2. js
最後に
jsonを勉強するためのおすすめ書籍
1. PythonとJavaScriptではじめるデータビジュアライゼーション

JSONデータからhtmlを生成する方法

html

まずはクリックしたらhtmlを生成するので「アイテム」というテキストを記述します。

この「アイテム」というテキストがクリックされたらクラス名、item-contentsulというulタグの中にhtmlを生成させます。

クリックしたときにデータを取り出すために属性をしておきます。

ここでは任意でdata-item-codeという属性を指定しています。

<div class="item" data-item-code="item">アイテム</div>     
<ul class="item-contents"></ul>

js

jsファイルにjson形式のデータとクリックしたときに発火させる処理を記述します。

jQuery(function() {
        var JsonItem = {
                       
                item: [
                        {name: 'アイテム', name_id: 'item', sub: [
                                {name: 'アイテム01', link: '#'},
                                {name: 'アイテム02', link: '#'},
                                {name: 'アイテム03', link: '#'}
                        ]},
                ],
        }
       
        function itemMenu(menu, itemcode){
                for (var i=0;i<menu.length;i++){
                        if(menu[i].name_id == itemcode){
                                var html_list = '';
                                for (var j=0;j<menu[i].sub.length;j++) {
                                        html_list = '<li><a href="'+ menu[i].sub[j].link +'">' + menu[i].sub[j].name + '</a></li>';
                                        jQuery('div[data-item-code=' + itemcode + ']').next('ul').append(html_list);
                                }
                        }
                }
        }
       
        jQuery(document).on('click', '.item', function(){
                jQuery('.item-contents').children('li').remove();              
                var itemcode = jQuery(this).attr('data-item-code');
                itemMenu(JsonItem.item, itemcode);
        });
});

Json形式のデータ

それでは一つ一つ見ていきたいと思います。

下記はJson形式のデータになります。

        var JsonItem = {
                       
                item: [
                        {name: 'アイテム', name_id: 'item', sub: [
                                {name: 'アイテム01', link: '#'},
                                {name: 'アイテム02', link: '#'},
                                {name: 'アイテム03', link: '#'}
                        ]},
                ],
        }

クリックしたときの処理

下記は「item」というクラスの要素がクリックしたときに発火する処理になります。

「item」というクラスがクリックされたらクリックされたタグの属性である「data-item-code」の値を変数にいれます。

そして「itemMenu」という関数を読みます。

        jQuery(document).on('click', '.item', function(){
                jQuery('.item-contents').children('li').remove();              
                var itemcode = jQuery(this).attr('data-item-code');
                itemMenu(JsonItem.item, itemcode);
        });

htmlの生成

関数の中ではループでそれぞれ条件に合ったときにタグを作りそれをhtmlに出力していきます。

        function itemMenu(menu, itemcode){
                for (var i=0;i<menu.length;i++){
                        if(menu[i].name_id == itemcode){
                                var html_list = '';
                                for (var j=0;j<menu[i].sub.length;j++) {
                                        html_list = '<li><a href="'+ menu[i].sub[j].link +'">' + menu[i].sub[j].name + '</a></li>';
                                        jQuery('div[data-item-code=' + itemcode + ']').next('ul').append(html_list);
                                }
                        }
                }
        }

最後に

Jsonを使うことでたくさんのデータやhtmlをクリック後に生成することが可能です。

htmlが多くなってしまったりロード時の読み込みが遅い場合にJsonを使うことでコードもすっきりして読み込みも早くなる可能性があります。

Jsonを覚えておくことでいろいろな場面で役に立つと思います。

jsonを勉強するためのおすすめ書籍

PythonとJavaScriptではじめるデータビジュアライゼーション

リンク