需要一些帮助解析JSON与JQuery

时间:2012-01-19 01:48:10

标签: javascript jquery json

我正在尝试使用JQuery解析JSON文档,但事情并没有按照我的方式进行。我想访问的Feed位于“ http://marketplace.envato.com/api/edge/new-files-from-user:collins,themeforest.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"
    }
]
}

我找到了一个预制脚本,它创建了一个表并将JSON项添加到它(下面),但我真正想做的就是创建我自己的div,可能是图像,标题和链接到项目。我已经尝试了无数的教程,并且还阅读了JQuery API,我似乎无法让它工作。任何人都可以帮助我吗?

<table id="userdata" border="1">
    <thead>
        <th>Thumbnail URL</th>
        <th>Item URL</th>
        <th>Cost</th>
        <th>Number of Sales</th>
    </thead>
    <tbody>
    </tbody>

</table>

<script>
$(document).ready(function(){
    $.getJSON(
        "http://marketplace.envato.com/api/edge/new-files-from-user:collins,themeforest.json",
        function(data){
            $.each(data.new-files-from-user, function(i,user){
                var tblRow =
                     "<tr>"
                    +"<td>"+user.thumbnail+"</td>"
                    +"<td>"+user.url+"</td>"
                    +"<td>"+user.cost+"</td>"
                    +"<td>"+user.sales+"</td>"
                    +"</tr>"
                $(tblRow).appendTo("#userdata tbody");
            });
        }
    );
});
</script>

2 个答案:

答案 0 :(得分:4)

data.new-files-from-user

那就是格式错误的javascript。如果对象属性有破折号,则无法像这样访问它们。 JS解释器看到这样:

data.new - files - from - user

当然data.new未定义且undefined减去不存在的局部变量会引发异常。

请改用[]语法。这允许您访问属性,这对于dot访问符号来说是不合法的。

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

答案 1 :(得分:1)

如果属性有短划线,则无法通过点表示法调用属性:

data.new-files-from-user

破折号是减法运算符。

尝试:

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