[問題]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

感謝大大的回答，小弟又上了一課

xxoxxoxxoxx

已解決，自刪

抱歉

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

xxoxxoxxoxx

原帖由 wmh 於 2009-10-22 13:36 發表
搜尋一下 JSON 應該可以找到很多喔。基本上 [] 包起來的東西是 Array，{} 包起來的東西是 Object，或是 PHP 裡面的關聯式陣列。

舉例來說:

[1, 5, 9, 2] 相當於 PHP 的 Array:

array(1, 5, 9, 2)


[{a:1}, {b: 5},  ...

感謝大大回覆，小弟找到教學了，正把問題刪掉而已，大大就回覆了

太感謝了，辛苦了

xxoxxoxxoxx

合併原po

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

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 編輯 ]

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 編輯 ]

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 編輯 ]

xxoxxoxxoxx

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

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