Jsonデータを10行2列に並べて表示したいです


下記ソースの通り、JsonのNameデータが最大20件(最大20件で最小1件が)送られてきます。  
そのデータを画面出力する際、10行2列に並べて表示したいのですが、  
実装方法が分かりません。ご教授をお願いします。

・java script Jsonデータ取得時  

[code]

      $.get(url, function (jsonData) {
        });
    
[/code]

・現在のHTMLです  

[code]

          <table id="example">
                <thead>
                    <tr>
                        <th>Name1列目</th>
                        <th>Name2列目</th>
                    </tr>
                </thead>
                <tbody>
            </table>
    
[/code]




2つずつ処理していけば良いです。

[code]

    $(document).ready(function(){
        
        var jsonData = [{"name": "一郎"},{"name": "二郎"},{"name": "三郎"}];
        
        for(var idx = 0; idx <= jsonData.length/2; idx++){
        
            var tr = $('<tr>');
            
            var name = jsonData[idx*2].name;
            tr.append('<td>' + name + '</td>');
            name = (idx*2+1 == jsonData.length) ? "" : jsonData[idx*2+1].name;
            tr.append('<td>' + name + '</td>');
    
            $('#example').find('tbody').append(tr);
        }
        
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <table id="example">
        <thead>
            <tr>
                <th>Name1列目</th>
                <th>Name2列目</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
[/code]




2つずつ処理していけば良いです。

[code]

    $(document).ready(function(){
        
        var jsonData = [{"name": "一郎"},{"name": "二郎"},{"name": "三郎"}];
        
        for(var idx = 0; idx <= jsonData.length/2; idx++){
        
            var tr = $('<tr>');
            
            var name = jsonData[idx*2].name;
            tr.append('<td>' + name + '</td>');
            name = (idx*2+1 == jsonData.length) ? "" : jsonData[idx*2+1].name;
            tr.append('<td>' + name + '</td>');
    
            $('#example').find('tbody').append(tr);
        }
        
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <table id="example">
        <thead>
            <tr>
                <th>Name1列目</th>
                <th>Name2列目</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
[/code]

