階層の配列データをリストタグでマークアップする方法

カテゴリーの階層をリスト形式でマークアップする際に、プログラミングでどのように書くのかパッと分からない人のためのヒントとして書いてみました。

本のジャンルをリストタグでマークアップしてみる

今回は「本 > コンピューター > プログラミング > JavaScript」という階層を次のように配列にしてみます。

var cats  = ['Book', 'Computer', 'Programming', 'JavaScript'];

これを次のようなリストになるようにしてみましょう。

<ul>
<li>Book
<ul>
<li>Computer
<ul>
<li>Programming
<ul>
<li>JavaScript</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

サンプルコード

サンプルコードはこちら。
備忘録としてのコードスニペットなのでまぁ、簡単なものです。

var cats  = ['Book', 'Computer', 'Programming', 'JavaScript'];
var len   = cats.length;
var close = '';
for (var i=0; i<len; i++) {
document.write('<ul><li>' + cats[i]);
close += '</li></ul>';
}
document.write(close);

ポイントは最後に閉じるタグ文字列を一気に結合する部分ですね。
DOMモデル操作でやってもいいのですが、より汎用性を持たせてみました。

この例のように特定の文字列で挟んでいくようなルールを持った情報を形作るには、後半の閉じていく部分をループで形作っていき、最後に結合するという手法で実現させます。

応用すれば他言語や複雑な階層にも対応できると思いますので参考にどうぞ～。