[問題]jQuery.getJSON 的用法(已解決)

xxoxxoxxoxx

大大不好意思，小弟又遇到困難了 ...

json格式搞懂了，但在jquery該如何寫呢?

例如：

{
"column":["a","b","c"],
"data": [
        {"a": "aaa", "b": "bbb", "c": "ccc" },
        {"a": "aaaa", "b": "bbbb", "c":"cccc" },
        {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
        ]
}

該如何從jquery印出一個表格，首欄(TH)為「a、b、c」
第二欄開始(TD)為資料
用append()好像是一直加上去，會無法正常顯示
不知道要如何寫呢@_@

$(function(){  
          
    $.getJSON("data.php", function(json){
        $("#content").html("<table><tr>");
        for(var i=0;i<json.column.length;i++){
        $("#content").append("<th>"+ json.column +"</th>");
        }
        $("#content").append("</tr><tr>");
       
        for(var y=0;y<json.data.length;y++){
                $("#content").append("<td>"+ json.data[y].a +"</td>");
                $("#content").append("<td>"+ json.data[y].b +"</td>");
                $("#content").append("<td>"+ json.data[y].c +"</td>");
        }
                $("#content").append("</tr></table>");
       
        });
});

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:10 編輯 ]

xxoxxoxxoxx

原帖由 wmh 於 2009-10-27 09:26 發表
欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題

嗯!!小弟了解了，感謝大大^^

wmh

欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題：

[
  ["aaa", "bbb", "ccc"], 
  ["aaaa", "bbbb", "cccc"], 
  ["aaaaa", "bbbbb", "ccccc"]
]

xxoxxoxxoxx

感謝大大回覆，先將字串寫入一個變數再印出
筆數多起來，效能真的好很多耶

感謝大大

另外請問大大，小弟寫的json格資資料這樣合適嗎?

我本來寫一欄為column的資料，想說可以用迴圈來宣告資料

但好像沒辦法，變成a,b,c還是要再單獨宣告一次

所以我寫"column":["a","b","c"],這一欄資料是不是無意義

直接寫這樣就好了?

{
"data": [
        {"a": "aaa", "b": "bbb", "c": "ccc" },
        {"a": "aaaa", "b": "bbbb", "c":"cccc" },
        {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
        ]
}

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-26 11:19 編輯 ]

wmh

不錯喔，自己寫出來總是比較有成就感而且可以比較踏實學到東西。

不過你用的 append 和 jQuery 的 selector 太頻繁，效能比較不是那麼好，如果先把 html 組起來，一次 append 會比較好，而且字串的組合要用來 array 操作，效能會更好。

$(function(){  
  $.getJSON("test.json", function(json){
    
    var html = [];
    
    //在maintable裡面增加id為title的<tr>
    html.push('<tr id=title>');
    for (var i=0; i<json.column.length; i++) {
      //抓取json裡column欄位的資料寫入td，並依附id為title的tr
      html.push('<td>', json.column, '</td>');
    } 
    html.push('</tr>');
    
    //依data資料的數量，跑迴圈
    for (var y=0; y<json.data.length; y++) {
      var name = "mycol";
      var a = json.data[y].a;
      var b = json.data[y].b;
      var c = json.data[y].c;
      
      //在maintable再增加一列tr，並名為name_y(以識別每列tr名稱)
      html.push('<tr id=', name, "_", y, '>');
      //抓取json裡data欄位的資料寫入td，並依附id為各name_y的tr
      html.push('<td>', a,'</td><td>', b,'</td><td>', c,'</td>');
      html.push('</tr>');
    }
    
    $('#maintable').append(html.join(''));
  });
});

xxoxxoxxoxx

感謝大大，我依xml的方式研究出json的方法了

只是不知道這樣寫好不好

再麻煩大大幫我看一下

以下：
----------------------------------------
test.json

{
"column":["a","b","c"],
"data": [
        {"a": "aaa", "b": "bbb", "c": "ccc" },
        {"a": "aaaa", "b": "bbbb", "c":"cccc" },
        {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
        ]
}

jquery script

        <script type="text/javascript">
        $(function(){  
                $.getJSON("test.json", function(json){
                        
                        //在maintable裡面增加id為title的<tr>
                        $('#maintable').append('<tr id=title></tr>');
                        for(var i=0;i<json.column.length;i++){
                                //抓取json裡column欄位的資料寫入td，並依附id為title的tr
                                $('<td></td>').append(json.column).appendTo('#maintable tr[id=title]');
                        }
                        //依data資料的數量，跑迴圈
                        for(var y=0;y<json.data.length;y++){
                                var name = "mycol";
                                var a = json.data[y].a;
                                var b = json.data[y].b;
                                var c = json.data[y].c;
                                //在maintable再增加一列tr，並名為name_y(以識別每列tr名稱)
                                $('#maintable').append('<tr id=' + name + "_" + y + '></tr>');
                                //抓取json裡data欄位的資料寫入td，並依附id為各name_y的tr
                                $('<td></td>').append(a).appendTo('#maintable tr[id='+ name + "_" + y +']');
                                $('<td></td>').append(b).appendTo('#maintable tr[id='+ name + "_" + y +']');
                                $('<td></td>').append(c).appendTo('#maintable tr[id='+ name + "_" + y +']');
                        }
                });
        });
</script>

body

<table border=0 id="maintable" cellspacing="0" cellpadding="5" ></table>

結果：

a	b	c
aaa	bbb	ccc
aaaa	bbbb	cccc
aaaaa	bbbbb	ccccc

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:09 編輯 ]

wmh

嗯，以 AJAX 資料傳輸的角度來看，使用 JSON 和 XML 的差異不大，就看你想選哪一種囉。

xxoxxoxxoxx

感謝大大回復，小弟再研究看看好了

我想說合併原po比較不會浪費資源，想說是相關問題

呵呵，感謝大大回覆

我有看到xml的方式，還在研究適不適用於json

xml

<?xml version="1.0" encoding="UTF-8"?>
<bestsellers>
        <book>
                <title>Shadow Dance: A Novel</title>
                <author>Julie Garwood</author>
                <publisher>Ballantine Books</publisher>
                <isbn>0345453867</isbn>
        </book>
        <book>
                <title>Exile: A Novel</title>
                <author>Richard North Patterson</author>
                <publisher>Henry Holt and Co.</publisher>
                <isbn>0805079475</isbn>
        </book>
</bestsellers>

jquery script

$(document).ready(function(){
        $().ajaxStart(function() {
        $("#loading").show();
    });
        $().ajaxComplete(function() {
        $("#loading").hide();
    });
$.ajax({
        url: "books1.xml",
        type: "GET",
        cache: false,
  dataType: "xml",
                error: function() {
              alert("Failed to Load");
            },
success: function(xml){
                $('#maintable').append('<tr class=title><td>NO</td><td>Title</td><td>Author</td><td>ublisher</td><td>ISBN</td></tr>');
                $('book',xml).each(function(e){
          var mytitle="";
          var myauthor="";
          var mypublisher="";
          var myisbn="";
mytitle=$('title',this).text();
mytitle=$.trim(mytitle);
myauthor=$('author',this).text();
myauthor=$.trim(myauthor);
mypublisher=$('publisher',this).text();
mypublisher=$.trim(mypublisher);
myisbn=$('isbn',this).text();
myisbn=$.trim(myisbn);

f=e+1;
$('#maintable').append('<tr id='+e+' align=left></tr>');
$('<td></td>').append(f+'.').appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(mytitle).appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(myauthor).appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(mypublisher).appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(myisbn).appendTo('#maintable tr[id='+e+']');
$("tr:gt(0):even").addClass('myeven');
$("tr:gt(0)dd").addClass('myodd');
                });               
        }
});  
});

body html

<table border=0 id=maintable cellspacing="0" cellpadding="5" ></table>

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 11:15 編輯 ]

wmh

不用修改原 po 啦，可以直接回覆一篇新的或另 po 都可以，這樣如果有其他人看到才不會看不懂。

我建議你先用 JavaScript 的 Array 存放你要組的 table 字串，最後用 join() 合成字串後再用 $("#content").html() 把值給放入，這樣效能會比較好。先試試看吧，有問題再提出囉。

xxoxxoxxoxx

合併原po

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-22 17:59 編輯 ]