Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

JSON→HTMLへぶち込む

ってことをみんなやってるのに教えてくれない。
絶対ライブラリ化してるはずやのに教えてくれない。
テンプレートも使ってないはずやのに教えてくれない。
お、おおおおおっおっおおおおしえっろっ!
基本的にはidでmappingしてます。
きたねーソースだな(笑

render関数

    _setJSONData : function(node, data){
        if(node.hasChildNodes()){
            node.childNodes[0].nodeValue = data;
        }else{
            node.setAttribute('value', data);
        }
    },
        
    render : function(json){
        var self = Kumu.Ajax;
        for(var v in json){
            var nodes = [];
            var elem = document.getElementById(v);
            while(elem){
                nodes.push(elem);
                elem.id = "";
                elem = document.getElementById(v);
            }
            for(var i = 0; i < nodes.length; i++){
                var node = nodes[i];
                node.id = v;
                var o = json[v];
                if(o && o instanceof Array){
                    var parent = node.parentNode;
                    var orig = node.cloneNode(true);
                    var next;
                    for(var j = 0; j < o.length; j++){
                        var obj = o[j];
                        var next;
                        if(j == 0){
                            for(var k in obj){
                                var temp = document.getElementById(k);
                                if(temp){
                                    self._setJSONData(temp, obj[k]);
                                    temp.id = "";
                                }
                            }
                        }else{
                            var clone = orig.cloneNode(true);
                            if(j == 1){
                                next = node.nextSibling;
                            }
                            parent.insertBefore(clone, next);
                            for(var k in obj){
                                var temp = document.getElementById(k);
                                if(temp){
                                    self._setJSONData(temp, obj[k]);
                                    temp.id = "";
                                }
                            }
                            clone.id = "";
                        }
                    }
                }else{
                    self._setJSONData(node, o);
                }
                node.id = "";
            }
        }
    }

JSON→elementのマッピングは人それぞれでしょうね。
(属性に値を入れたい事もあるでしょう)
あと今回はidを消してます。
そこはお好みでon/offしてください。
Objectの配列に対応してるので

JSON

  'test2' : [
  {
    'no':1,
    'name' : 'name1'
  }, 
  {
    'no':2,
    'name' : 'name2'
  }, 
  {
    'no':3,
    'name' : 'name3'
  }, 
  {
    'no':4,
    'name' : 'name4'
  }, 
  {
    'no':5,
    'name' : 'name5'
  }]

HTML

<table border="1">
  <tr>
    <td>-</td>
    <td>No</td>
    <td>Name</td>
  </tr>
  <tr id='test2'>
    <td>増えるわかめちゃんTest</td>
    <td id="no">Test</td>
    <td id="name">Test</td>
  </tr>
</table>

のを展開できます。
(これだとtrが配列数分繰り返される)
まあいったらイメージ的にはね、Mayaaのパクリですよ。
参考になった、使いたい、こうした方がよいのでは?って人はコメント下さい。
うくく。