【jQuery/nestable】JSONから作成したTreeのJSONを取得し直したい

Question

質問概要

nestableを使ったツリーノードで、JSONからツリーを作成した後、
変更内容をJSONで取得したいが、取得できない。

取得には、
$('.dd').nestable('serialize');
を利用。

質問詳細

Electronを使って、簡単なエディタ（アウトラインプロセッサ）を作ろうとしています。
そのアウトライン部分に、ツリーを使いたく探していたときに、
nestableというフレームワークを見つけたのですが、
JSONから作成したツリーのJSONが、nestableにもともと有る$('.dd').nestable('serialize');では取得できませんでした。

サンプルを見たところ、以下の図のように取得出来るようにはなっているようですが、その方法が分かりません。

アウトラインプロセッサなので、ツリーの生成と削除ができるように、
以下のような関数を組みましたが、生成は出来るのですが、取得ができません。

<!-- ツリー部分 -->
<div class="dd" id="TreeNode">
							<ol class='dd-list dd3-list'>
								<div id="dd-empty-placeholder"></div>
							</ol>
						</div>


<!-- JSON出力部分 -->
<textarea id="nestable-output"></textarea>


<script>
/* JSONからTreeを作成 */
	function createTreeNode(json){

		var updateOutput = function(e) {
			var list = e.length ? e : $(e.target),
			output = list.data('output');
			if(window.JSON) {
				output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
			}
			else {
				output.val('JSON browser support required for this demo.');
			}
		};

		var obj = json;
		var output = '';
		function buildItem(item) {

			var html = "<li class='dd-item' data-id='" + item.id + "'>";
			html += "<div class='dd-handle dd3-handle'></div><div class='dd3-content'>" + item.title + "</div>";
			html += '<div>[<a href="javascript:addTreeNode('+ item.id +');">+</a>]</div>';


			if (item.children) {
				html += "<ol class='dd-list'>";
				$.each(item.children, function (index, sub) {
					html += buildItem(sub);
				});
				html += "</ol>";
			}

			html += "</li>";
			return html;
		}

		$.each(JSON.parse(obj), function (index, item) {
			output += buildItem(item);
		});

		$('#dd-empty-placeholder').html(output);
		$('#TreeNode').nestable().on('change', updateOutput);

		updateOutput( $('#TreeNode').data('output', $('#nestable-output')) );

	}
</script>

エラー

TypeError: output is undefined
TypeError: el[0] is undefined

まず、以下のスクリプトがいまいち理解できず躓いております。

var updateOutput = function(e) {
            var list = e.length ? e : $(e.target),
            output = list.data('output');
            if(window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
            }
            else {
                output.val('JSON browser support required for this demo.');
            }
        };

皆様のお知恵をお貸しください。
よろしくお願いいたします。

Comments

[kei344]

「取得できませんでした」とは具体的にどのような状況でしょうか。（値が無かった、関係ない文字列だったなど）

[nnahito]

閲覧ありがとうございます。空のArrayが返ってくる、という状態です。素人ながら、jQueryで動的に作成したものなので、再取得ができていないのかなと思っていたりします。

[kei344]

質問文に #dd-empty-placeholder, #TreeNode, #nestable, #nestable-output の要素が見当たりません。

[nnahito]

申し訳ありません、間違った部分をペーストしておりました。修正しました。

[kei344]

#nestable, #nestable-output の要素が見当たりません。

[nnahito]

すいません、追記しました

Answer 1

とりあえずHTML文法違反なので問題なのと、serialize 処理の記述がOL要素直下のli要素を探すため、どちらも問題では。

<ol class='dd-list dd3-list'>
    <div id="dd-empty-placeholder"></div>
</ol>

【ol 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ol

許可された内容 0 個以上の <li> 要素

Comments

[nnahito]

ご回答ありがとうございます。

>HTML文法違反なので問題
恐らく、このHTML文法違反というのは、olにdivが挟まっているということだと思いますが、
公式のUsageにそう書かれているのです……
https://github.com/RamonSmit/Nestable

実際、
<div id="dd-empty-placeholder"></div>
を、消してみるとTreeが生成されませんでした……

[kei344]

消しただけで「$('#dd-empty-placeholder').html(output);」を変えていないとかでは？
https://jsfiddle.net/1buhz596/

[nnahito]

ご回答ありがとうございます。
その部分を忘れておりました…申し訳ありません。
idをolに振り直すと、無事取得できました。
ご迷惑をおかけいたしました。
ありがとうございました。