読者です 読者をやめる 読者になる 読者になる

RiotJSで再帰的にJSONを描画する方法

再帰的なRiotJSのタグの書きかた

再帰的にタグを書いてしまうとスタックオーバーフローになる
web上でriot.js 再帰とかで検索しても日本語の物が少ない

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>
</head>
<body>
  <object></object>

  <script type="riot/tag">
  <object>
    <p>{key}{value}</p>
    <ul each={key, data in isLeaf(this.opts.datas)? this.opts.datas: []}>
      <object key={key} datas={data}/>
    </ul>

    this.isLeaf = function(datas){
      return typeof datas=='object';
    }
    this.key = typeof this.opts.datas!='object'? "": Object.keys(this.opts.datas)[0];
    this.value = this.opts.datas;
  </object>
  </script>

  <script>
  riot.mount('object', {
    datas : JSON.parse('{"root": {"A": "B", "C": "D", "E": {"F": "G", "H": "I"}}, "root2": "ABC2", "root3": "ABC3"}')
  });
  </script>
</body>

画像↓
f:id:surume_Reflection:20170128003650p:plain

通常はeach={key, data, datas}で基本ループ可能だが...

isLeaf()で末尾の判定([])を取り、再帰処理を離脱している
※riot.mountに対してjson: “"が渡せなかった(予約語?)