0

だから私はjQueryで解析しようとしているテンプレートのようなスクリプトを持っています. 問題は、データに置き換えたい特定のタグがあることです。これは通常は問題ありませんが、オブジェクト プロパティをループしたいため、大幅に難しくなっています。

外部ライブラリにはできるだけ依存したくないので、ここでは jQuery のみを使用しています。Angular がおそらくここで役立つことはわかっていますが、まだよくわかりません。

テンプレート コードは次のようになります。

<?xml version="1.0" ?>
<div id="test">
    <each obj="list">
        <div class="listdiv">
            <span><value>thing</value></span>
            <span><value>thing2</value></span>
            <span><value>thing3</value></span>
            <div>
                <each obj="moreStuff">
                    <span>blah: <value>blah</value></span>
                    <span>foo: <value>foo</value></span>
                </each>
            </div>
        </div>
    </each>
</div>

そして、次の JSON オブジェクトを渡したいと思います。

{
    list: [
        { thing: 3, thing2: 4, thing3: 5, moreStuff: [{blah:1, foo:2},{blah:4, foo:6}] },
        { thing: 1, thing2: 1, thing3: 2, moreStuff: [{blah:4, foo:6}] }
    ]
}

私が欲しいのは、これに出てくることです: 

<div id="test">
    <div class="listdiv">
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <div>
            <span>blah: 1</span>
            <span>foo: 2</span>
            <span>blah: 4</span>
            <span>foo: 6</span>
        </div>
    </div>
    <div class="listdiv">
        <span>1</span>
        <span>1</span>
        <span>2</span>
        <div>
            <span>blah: 4</span>
            <span>foo: 6</span>
        </div>
    </div>
</div>

正規表現で問題なく動作するようにしましたが、もちろん DOM 操作で行う方がクリーンであり、同様に拡張可能です。問題を引き起こすのは、タグの再帰的な性質と、タグが親からデータを取得する必要が<each>あるという事実です。<value>

私はこれを行うために多くの方法を試しましたが、再帰の問題 (無限の再帰とそれを置き換えることができない) が発生するか、データを正しくプルできません。これをうまく行う方法はありますか？

4