順不同データから階層リストを作りたい

質問

var listArray = [
{
name:'home',
url:'http://xxxx/',
title:'home',
},
{
name:'main',
url:'http://xxxx/main',
tile:'メインページ',
},

{
name:'log',
url:'http://xxxx/log',
tile:'更新履歴',
},
]
上のようなデータがあります。

これを
for(i in listArray){
}
で取り出してとりあえずリストを作ることはできました。
そこで次に階層リストにしたくて
{
name:'test',
url:'http://xxxx/test',
tile:'テスト',
parent:'log',
},

などと追加し、name:'log'データの子リストにしたいのですが、ここからのアイデアが全く浮かびません。
listArray[i]['parent'] = 'log' でname:'log'の子にするという処理です。
親->子の順に並んでいるとも限らないので、何かヒントになるようなものはないでしょうか？
このようにすればいいとか、そもそものやり方が間違えているでも構いません。
ただ方法としてはjavascriptでしかできないのが現状です。

よろしくお願いします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

バイナリツリーや二分木で検索すると出てきますが、CとかJavaの話になりそうだし、、、

最上位を配列ではなくObjectにするとわかりやすいと思いますし、管理もしやすくなると思います。

var listObject={
home:{/*略*/},
main:{/*略*/},
log :{
name:'log',
url:'http://xxxx/log',
tile:'更新履歴',
child :{ // 新しく追加した要素
name:'test',
url:'http://xxxx/test',
tile:'テスト',
parent:'log',
child : null // 子要素は持ってないためnull
}
}

こんな感じのオブジェクトになるように作っていけば、
childをたどっていくことで全ノードを取得できるようになります。
alert( listObject['log']['child']['url'] );

親要素をさかのぼっていく場合は、
{ parent: listObject['log'] }として親要素を入れることも出来ますが、たぶんメモリリークしてる可能性が高いです。
listObject['log']['parent']['child']['parent']['child'].....

DOMのparentNode.firstChildの無限ループと同じなんですが、ネイティブコードとJavaScriptインタプリタでは違いますので、しょうがないですね。
クロージャを使って対策は出来るんですが、結構ややこしいので割愛。

お礼

ありがとうございます。
なんとかできました！
childをたどる形にすればよかったんですね。

回答No.1

Yohjira

listArrayの並び替えができればいいのではないかなと思います。

・配列listArray2を定義する（名前があまり良くないですね・・・）
・listArrayからデータを取り出す
・parentが指定されていなければ、listArray2に追加する
・parentが指定されていれば、listArray2の指定された要素の直後に挿入する

単純に考えると、1つの親要素に対して子要素が2つ以上あると、
後から定義されているものが上に来てしまいますね。
それでも問題はないと思いますが。

配列の並び替えが出来てしまえば、データを使うのは難しくないと思います。

お礼

配列の並び替えのマスターが必須ですよね。
ありがとうございます！