8167


下記ソースの通り、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]


CC BY-SA 3.0
2015-03-20T04:06:18.863
8164
2015-03-20T13:03:38.180
2015-03-20T04:14:17.743
7626
7626
question
javascript html css
Jsonデータを10行2列に並べて表示したいです


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]


CC BY-SA 3.0
2015-03-20T05:14:32.913
8167
2015-03-20T08:44:06.077
2015-03-20T08:44:06.077
7214
7214
8164
answer


今回のように元のデータ構造と異なる形式で表示する場合、いきなり表示ロジックを考えようとすると混乱してしまいがちです。  
問題が難しいときは、より小さな問題に分割することをおすすめします。  
つまり、  
①データ構造を2個ずつセットの配列に組み替える  
②tableタグの中に表示する  
という２つの処理に分割すると、考えやすくなるはずです。

[code]

    <table id="sampleTable">
    <thead>
        <tr>
            <th>Name1列目</th>
            <th>Name2列目</th>
        </tr>
    </thead>
    <tbody></tbody>
    </table>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    var jsonString = '[{"name": "東京都"}, {"name": "大阪府"}, {"name": "北海道"}, {"name": "福岡県"}, {"name": "沖縄県"}]';
    var jsonData = JSON.parse(jsonString);
    
    // 2個セットのデータ構造に組み替える
    var pairs = [];
    for (var i = 0; i < jsonData.length; i += 2) {
    pairs.push({
        first: jsonData[i].name,
        second: (jsonData[i + 1] || {name: ''}).name // jsonData[i+1] がundefinedなら {name: ''} が使われる
    });
    }
    
    // ↓こんな感じのデータ構造になっている
    //   最後の空欄部分にもちゃんとオブジェクトがあるので、余計なnullチェックみたいな処理が要らない
    // pairs = [
    //     {first: '東京都', second: '大阪府'},
    //     {first: '北海道', second: '福岡県'},
    //     {first: '沖縄県', second: ''}
    // ]
    
    // データ構造そのまま表示するだけなので、条件分岐も必要ない
    for (var row = 0; row < pairs.length; row++) {
    $('<tr/>')
        .append($('<td/>').text(pairs[row].first))
        .append($('<td/>').text(pairs[row].second))
        .appendTo('#sampleTable>tbody');
    }
    </script>
[/code]


CC BY-SA 3.0
2015-03-20T08:36:38.423
8181
2015-03-20T08:36:38.423
8078
8164
answer