嵌套的json抓取

时间:2016-02-12 05:30:58

标签: javascript jquery json

我对javascript和jquery以及ajax有一些了解我正在创建一个应用程序,它将拥有多个用户并且它有一个复杂的json。 我们如何通过getJSON来实现它并在html中解析它。我希望用户了解其图像路径等详细信息,以及我们如何访问

{
    "datas": {
        "show_dashboard_access_page": false,
        "login_status": "signedin",
        "new_io": true,
        "bst_users": [{
            "userA": {
                "user_logo": "image path",
                "partner_since": "Jan 2013",
                "status_now": "bronze",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 123000,
                "storage_wise_usage": 73000,
                "server_wise_usage": 50000,
                "order": 1
            },
            "userB": {
                "user_logo": "image path",
                "partner_since": "Feb 2014",
                "status_now": "silver",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 160000,
                "storage_wise_usage": 60000,
                "server_wise_usage": 100000,
                "order": 2
            },
            "userC": {
                "user_logo": "image path",
                "partner_since": "Mar 2014",
                "status_now": "silver",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 180000,
                "storage_wise_usage": 80000,
                "server_wise_usage": 100000,
                "order": 3
            }
            }]
    },
    "success": true
}


code that i have tried:
 $.getJSON( "dummy.json", function( response ) {
  //console.log(response.data.bst_users)
  $.each(response.data.bst_users , function(key,val){
    console.log(key)
    var item = "<li> <img src='" + val["user_logo"] + "' alt=''/>" + "</li>";
    $('ul').append(item)
 })
});

Plz帮助

2 个答案:

答案 0 :(得分:2)

bst_users是一个包含单个元素的数组,它是一个对象。因此,您需要遍历bst_users[0]中的属性。

$.each(response.datas.bst_users[0], function(key,val){
    ...
}

答案 1 :(得分:0)

您可以使用jquery来渲染结果。

&#13;
&#13;
var data = {
    "datas": {
        "show_dashboard_access_page": false,
        "login_status": "signedin",
        "new_io": true,
        "bst_users": [{
            "userA": {
                "user_logo": "image path",
                "partner_since": "Jan 2013",
                "status_now": "bronze",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 123000,
                "storage_wise_usage": 73000,
                "server_wise_usage": 50000,
                "order": 1
            },
            "userB": {
                "user_logo": "image path",
                "partner_since": "Feb 2014",
                "status_now": "silver",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 160000,
                "storage_wise_usage": 60000,
                "server_wise_usage": 100000,
                "order": 2
            },
            "userC": {
                "user_logo": "image path",
                "partner_since": "Mar 2014",
                "status_now": "silver",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 180000,
                "storage_wise_usage": 80000,
                "server_wise_usage": 100000,
                "order": 3
            }
            }]
    },
    "success": true
};

var dataToRender = data.datas.bst_users;

$.each(dataToRender[0],function(k,v){

  console.log("Result  : " + k);
  
  $.each(v,function(key,val){
    console.log(key + "  :  " + val);
  });
  
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;