Nested json fetching

Question

I have some knowledge of javascript and jquery and ajax I am making one app that will have multiple user on it and it has one complex json. How can we do it by getJSON and parse it in html. I want user a b c details like its image path and all how can we access that

{
    "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 help

Barmar · Accepted Answer · 2016-02-12 05:49:15Z

2

bst_users is an array with a single element that's an object. So you need to loop over the properties in bst_users[0].

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

edited Feb 12, 2016 at 5:49

answered Feb 12, 2016 at 5:36

Barmar

789k57 gold badges554 silver badges668 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deepak Over a year ago

But how can i loop over every user object

Barmar Over a year ago

That's what $.each does.

Shubham · Accepted Answer · 2016-02-12 05:46:39Z

You can use jquery to render the result like this.

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);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Nested json fetching

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related