jQuery JSON解析 - 意外的令牌錯誤

Question

我想使用Envato API來收集一些用戶統計w/jQuery。我將展示一個例子響應JSON：

{ 
"new-files-from-user":[ 
    { 
    "thumbnail":"http://3.s3.envato.com/files/60560.jpg", 
    "tags":"", 
    "user":"collis", 
    "url":"http://themeforest.net/item/manilla-photoshop-design/22803", 
    "live_preview_url":"http://2.s3.envato.com/files/60561/1_Home.__large_preview.jpg", 
    "uploaded_on":"Wed Dec 03 03:32:35 +1100 2008", 
    "cost":"10.00", 
    "item":"Manilla Photoshop Design", 
    "sales":"294", 
    "rating":"4", 
    "id":"22803" 
    }, 
    { 
    "thumbnail":"http://2.s3.envato.com/files/60223.jpg", 
    "tags":"clean", 
    "user":"collis", 
    "url":"http://themeforest.net/item/black-white-simple-theme/22705", 
    "live_preview_url":"http://0.s3.envato.com/files/60224/1_home.__large_preview.jpg", 
    "uploaded_on":"Tue Dec 02 04:01:12 +1100 2008", 
    "cost":"8.00","item":"Black + White Simple Theme", 
    "sales":"272"," 
    rating":"4", 
    "id":"22705" 
    }, 
    { 
    "thumbnail":"http://1.s3.envato.com/files/44556.jpg", 
    "tags":"clean", 
    "user":"collis", 
    "url":"http://themeforest.net/item/quik-v1-admin-skin/17314", 
    "live_preview_url":"http://3.s3.envato.com/files/44557/1_green.__large_preview.jpg", 
    "uploaded_on":"Fri Sep 05 07:30:24 +1000 2008","cost":"12.00", 
    "item":"Quik v1 Admin Skin", 
    "sales":"336", 
    "rating":"5", 
    "id":"17314" 
    }, 
    {"thumbnail":"http://3.s3.envato.com/files/45212.jpg", 
    "tags":"clean", 
    "user":"collis", 
    "url":"http://themeforest.net/item/freshcorp-business-template/17528", 
    "live_preview_url":"http://3.s3.envato.com/files/45213/1_Homepage.__large_preview.jpg", 
    "uploaded_on":"Tue Sep 09 06:10:50 +1000 2008", 
    "cost":"20.00", 
    "item":"FreshCorp - Business Template", 
    "sales":"277", 
    "rating":"4","id":"17528" 
    }, 
    {"thumbnail":"http://0.s3.envato.com/files/45739.jpg", 
    "tags":"clean", 
    "user":"collis", 
    "url":"http://themeforest.net/item/real-estate-html-template/17732", 
    "live_preview_url":"http://0.s3.envato.com/files/45740/1_homepage.__large_preview.jpg", 
    "uploaded_on":"Fri Sep 12 14:22:45 +1000 2008", 
    "cost":"20.00","item":"Real Estate HTML Template", 
    "sales":"175", 
    "rating":"4", 
    "id":"17732" 
    } 
] 
} 

這裏是我的腳本：

<script type="text/javascript"> 
//this gets JSON data from an url 
$.getJSON("http://marketplace.envato.com/api/edge/new-files-from-user:collins,themeforest.json?callback=?", 
//this function gets called when data has been recieved 
function(data){ 
    //parsing JSON data, line by line(like foreach) 
    $.each(data['new-items-from-user'], function(i,item){ 
     //puts all titles in our div 
     $("#test").append(item.item+"<br />"); 
    }); 
}); 
</script> 
<div id="test"></div> 

這裏就是我在Chrome控制檯中看到： '未捕獲的SyntaxError：意外的標記：'（PIC http://imgur.com/8qoqO）。

我不知道如果我在我的代碼中的錯誤是造成這個問題，但這裏有一個小提琴看到的結果：http://jsfiddle.net/wkmDj/

謝謝， 馬特

Answer 1

在第二個對象在JSON響應列表中，屬性名稱中間有一個換行符：

"sales":"272"," 
rating":"4", 
"id":"22705" 

也許這只是一個轉錄錯誤。

編輯 —確定這是一個抄寫錯誤。我認爲問題在於您正在與之交談的網站不能正確理解JSONP。它返回的JSON看起來不錯，但JSONP要求將JSON返回封裝在一個函數調用中。換句話說，響應應該是這樣的：

somefunction({"new-items-from-user":[{ ... }]}); 

它不這樣做，所以當JSON是通過自身評估它構成一個語法錯誤，因爲JavaScript認爲，導致{是碼塊的開始，而不是對象文字。

查看該API的文檔，我沒有看到任何建議它被用作JSONP服務。看起來他們打算從手機應用程序或Web服務器之類的東西中使用它，而不是通過JSONP從瀏覽器中的JavaScript中使用。

Answer 2

一個可能的問題，代碼：

data['new-items-from-user'] 

，但數據是這樣的：

{"new-files-from-user":[]} 

Answer 3

像@Pointy說，響應是沒有得到解析爲JSON，而是作爲腳本。所以eval函數正在執行。

eval('{"new-files-from-user":[]}'); 

它給出錯誤。

在jsonp的情況下，如果url是http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest。JSON，電話應爲

http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest.json?callback=mycallback 

和反應應該是

mycallback({"new-files-from-user":[]}); 

，如果你有一個函數mycallback

eval('mycallback({"new-files-from-user":[]});'); 

將工作

，或者如果你不不設置回調

http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest.json?callback= 

的反應應該是

({"new-files-from-user":[]}); 

然後

eval('({"new-files-from-user":[]});'); 

將工作

你的情況，你可以看到，每次jQuery是設置參數callback像

callback=jQuery171009222313176259944_1327017091413 

所以反應應該是

jQuery171009222313176259944_1327017091413({"new-files-from-user":[]}); 

e.g：https://twitter.com/statuses/user_timeline/tomhanks.json?callback=myCallback&count=5

但由於響應是一個JSON字符串這會工作。 （受同源策略）

$.get("http://marketplace.envato.com/api/v3/new-files-from-user:turkhitbox,themeforest.json?callback=?", 
function (data){ 
    data = $.parseJSON(data); 
    console.log(data); 
});