2012-08-06 144 views
0

我試圖顯示,看起來像這樣JSON數據:如何從JQuery的的getJSON提取JSON對象數據

{ 
    "response": { 
     "@attributes": { 
      "status": "ok", 
      "version": "12" 
     }, 
     "label": { 
      "@attributes": { 
       "plid": "1234", 
       "name": "demo" 
      } 
     }, 
     "page": { 
      "@attributes": { 
       "name": "bookinfo" 
      }, 
      "count": 1, 
      "pages": "144", 
      "current_page": 1, 
      "isbn10": "0824828917", 
      "isbn13": "9780824828912", 
      "title": "Surf Science", 
      "author": "Tony Butt - Paul Russell - Rick Grigg", 
      "binding": "Paperback", 
      "msrp": 34, 
      "publisher": "University of Hawaii Press", 
      "published_date": "2004-07-01", 
      "edition": "2nd", 
      "rank": 176243, 
      "rating": 0, 
      "_amazon_item": null, 
      "image": "http:\/\/ecx.images-amazon.com\/images\/I\/51-dKe7tztL._SL75_.jpg" 
     } 
    } 
}​ 

我知道的JQuery調用.getJSON可以用來得到類似上面一個對象,但我不知道如何從中提取數據,所以我可以在網頁上動態顯示它。有關如何使用JQuery/Javascript做到這一點的任何想法?例如,我將如何獲得作者或標題?

我下面的代碼(唯一的區別是,當我測試它實際上我用我的真正的關鍵):

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 

    <script type="text/javascript"> 

    $.ajax({ 
     type: "GET", 
     url: "http://api2.campusbooks.com/12/rest/search", 
     dataType: "json", 
     data: { 
     key : "[my_key]", 
     keywords : "calc", 
     timeout : "7", 
     format : "json" 
     }, 
     success: function(jsonData) { 
     console.log("Success! " + jsonData); 
     }, 
     error: function(jsonData) { 
     console.log("Error! " + jsonData); 
     } 
    }); 
     </script> 

    </body> 
    </html> 

在Firebug控制檯什麼版畫是:

Error! [object Object] 

所以對象是返回的只是[object Object]。 「錯誤!」部分來自我的代碼。當我把所有的變量爲1個網址並進入它,然後頁面顯示是:使用

{"response":{"@attributes":{"status":"ok","version":"12"},"label":{"@attributes":{"plid":"[1234]","name":"[my_name]"}},"page":{"@attributes":{"name":"search"},"count":1000,"pages":100,"current_page":1,"results":{"book":[{"isbn10":"0538497394","isbn13":"9780538497398","title":"Essential Calculus: Early Transcendentals, Enhanced Edition (with Enhanced WebAssign with eBook Printed Access Card for Multi Term Math and Science)","author":"James Stewart","binding":"Hardcover","msrp":177.95,"pages":"944","publisher":"Brooks Cole","published_date":"2010-01-01","edition":"1","rank":12133,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/41%2Bk0odfWaL._SL75_.jpg"},{"isbn10":"1439058474","isbn13":"9781439058473","title":"Dosage Calculations (Available Titles 321 Calc!dosage Calculations Online)","author":"Gloria D. Pickar - Amy Pickar-Abernethy","binding":"Paperback","msrp":90.95,"pages":"720","publisher":"Delmar Cengage Learning","published_date":"2012-01-01","edition":"9","rank":2004,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/41TcBjzhPnL._SL75_.jpg"},{"isbn10":"0840065639","isbn13":"9780840065636","title":"Applied CALC (with Mathematics CourseMate with eBook Printed Access Card)","author":"Frank Wilson","binding":"Paperback","msrp":83.95,"pages":"256","publisher":"Brooks Cole","published_date":"2011-01-01","edition":"1","rank":514542,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/516p3a40S4L._SL75_.jpg"},{"isbn10":"1430231599","isbn13":"9781430231592","title":"Beginning OpenOffice Calc: From Setting Up Simple Spreadsheets to Business Forecasting","author":"Jacek Artymiak","binding":"Paperback","msrp":39.99,"pages":"136","publisher":"Apress","published_date":"2011-09-05","edition":"1","rank":682980,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/51FFF95bq4L._SL75_.jpg"},{"isbn10":"0071488456","isbn13":"9780071488457","title":"Bob Miller's High School Calc for the Clueless - Honors and AP Calculus AB & BC (Bob Miller's Clueless Series)","author":"Bob Miller","binding":"Paperback","msrp":12.95,"pages":"246","publisher":"McGraw-Hill","published_date":"2007-08-14","edition":"1","rank":1121409,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/51Adl-dr0cL._SL75_.jpg"},{"isbn10":"0821848178","isbn13":"9780821848173","title":"Riot at the Calc Exam and Other Mathematically Bent Stories","author":"Colin Adams","binding":"Paperback","msrp":32,"pages":"271","publisher":"American Mathematical Society","published_date":"2009-07-21","edition":"","rank":625803,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/51Jvoh2ZQtL._SL75_.jpg"},{"isbn10":"111816170X","isbn13":"9781118161708","title":"Calculus II For Dummies","author":"Mark Zegarelli","binding":"Paperback","msrp":19.99,"pages":"384","publisher":"For Dummies","published_date":"2012-01-24","edition":"2","rank":16179,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/51W8PJsg%2BZL._SL75_.jpg"},{"isbn10":"1847190979","isbn13":"9781847190970","title":"Learn OpenOffice.org Spreadsheet Macro Programming: OOoBasic and Calc automation: A fast and friendly tutorial to writing macros and spreadsheet applications","author":"Dr Mark Alexander Bain","binding":"Paperback","msrp":39.99,"pages":"220","publisher":"Packt Publishing","published_date":"2006-12-22","edition":"","rank":1118193,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/51SOipRUqOL._SL75_.jpg"},{"isbn10":"0495014281","isbn13":"9780495014287","title":"Essential Calculus: Early Transcendentals (Stewart's Calculus Series)","author":"James Stewart","binding":"Hardcover","msrp":190.95,"pages":"912","publisher":"Brooks Cole","published_date":"2006-03-01","edition":"1","rank":1392,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/41T-md-t%2B6L._SL75_.jpg"},{"isbn10":"0764146939","isbn13":"9780764146930","title":"Barron's AP Calculus, 11th Edition","author":"David Bock M.S. - Shirley O. Hockett M.A.","binding":"Paperback","msrp":18.99,"pages":"696","publisher":"Barron's Educational Series","published_date":"2012-02-01","edition":"11","rank":3475,"rating":0,"image":"http:\/\/ecx.images-amazon.com\/images\/I\/51GENtM0pGL._SL75_.jpg"}]}}}} 

網址:

http://api2.campusbooks.com/12/rest/search?key=[my_key]&keywords=calc&timeout=7&format=json 
+1

MDN JavaScript指南有關於使用對象的整個部分:https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects – 2012-08-06 22:21:59

+0

解析時,您有一個對象結構。對象的屬性訪問是'object.property'或'object [「property」]'...後者爲非有效標識字符提供了更多的靈活性,如'@'。 – 2012-08-06 22:29:40

+1

其他資源:http://api.jquery.com/jQuery.getJSON/ – Nope 2012-08-06 22:42:36

回答

3

假設JSON返回爲您呈現,這裏是一個例子:

$.getJSON("some/URL", function(jsonData) { 
    $("#titleDiv").html(jsonData.response.page.title); 
    // #titleDiv now holds the text "Surf Science" 

    // another way 
    $("#authorDiv").html(jsonData["response"]["page"]["author"]); 
    // #authorDiv now holds the text "Tony Butt - Paul Russell - Rick Grigg" 
}); 

也許有更好的方式來做到這一點是使用$.ajax,因爲這就是jQuery的幕後使用反正。你可以指定一個成功和錯誤處理功能,這將有調試任何問題,幫助這種方式,你可以有:

$.ajax({ 
    type: "GET", 
    url: "http://api2.campusbooks.com/12/rest/bookinfo", 
    dataType: "json", 
    data: { 
    key : "[yourkey]", 
    isbn : "0538497815", 
    timeout : "6", 
    format : "json" 
    }, 
    success: function(jsonData) { 
    console.log("Success! " + jsonData); 
    }, 
    error: function(request, status, error) { 
    console.log("Error! " + request.responseText); 
    } 
}); 

如果出現錯誤,你應該能夠找出它是通過查看瀏覽器的什麼JavaScript控制檯。 順便說一句,您可以按照上面的方法指定參數,而不是將它們放入URL中。

還有一些開發者工具可用於幫助解決這類問題,例如Google Chrome的REST Console app或Firefox的RESTClient add-in。他們可以很容易地輸入您的請求參數並確定可能導致問題的原因。

+0

我理解你的代碼,但它似乎並沒有工作......有沒有辦法檢查我是否收回任何數據呢? – cbr0wn 2012-08-07 03:06:07

+0

確保你用正確的URL替換「some/URL」,然後在回調函數中加入類似下面的內容:「alert('JSON returned!');」如果你收回任何數據,你會得到一個彈出警報。你也可以添加一個「console.log(jsonData);」在函數中將JSON對象輸出到瀏覽器的JavaScript控制檯。這將允許您查看返回的JSON的確切格式。 – 2012-08-07 04:17:41

+0

好,所以這是問題所在。似乎沒有數據被返回。我使用的是campusbooks.com的url,他們的「API是通過標準REST格式的HTTP GET請求實現的」。我使用的網址類似於http://api2.campusbooks.com/12/rest/bookinfo?key=[mykey]&isbn=0538497815&timeout=6&format=json,[mykey]替換爲我的實際密鑰。它看起來像我做錯了什麼? – cbr0wn 2012-08-07 09:55:25