Unable to access nested Javascript Object

Question

I have a Javascript object, that contains nested objects, but I can't seem to access the nested objects - the objects are formatted like:

Object
  0: Object
    colour: Object
      colour: value
      element: value
    kelvin: Object
      colour: value
      element: value
    status: Object
      state: value
      element: value
  1: Object
    colour: Object
      colour: value
      element: value
    kelvin: Object
    status: Object

When I stringify the parent object, it doesn't include the nested objects:

{"0":{},"1":{},"2":{},"3":{},"4":{},"5":{}}

Can anyone help me identify what I'm doing wrong?

Thanks in advance!

Here is the code where I'm having issues:

function updateStatus()
{
    var triggers = {};

    counter = 0;

    $.when(
        $("form[type='light_status']").each(function(f){
            var options = {};
            form = $(this);
            selector = form.attr('selector');
            id = form.attr('id');
            $.ajax({
                url: '/status/' + selector + '/' + id,
                method: 'GET',
                success: function(data) {
                    var data = $(data)[0];
                    var switchInput = '#'+data.selector+'-'+data.id;
                    if(data.status == 'on')
                    {
                        options.status = {element: switchInput, state: true};
                    }
                    else
                    {
                        options.status = {element: switchInput, state: false};
                    }
                    options.colour = {element: '#'+data.id+'-colourpicker', colour: data.colour};
                    options.kelvin = {element: '#'+data.id+'-kelvinpicker', colour: data.colour};
                }
            });
            triggers[counter] = options;
            counter++;
        })
    ).done( function() {
        console.log(triggers); //can see all nested objects
        console.log(triggers[0].colour); //returns null
        console.log('triggers:' + JSON.stringify(triggers)); // can only see parent object
    });

}

you are using when, but each method doesn't return any defer, so done will gets called immediately, it will not wait to complete ajax request. — Laxmikant Dange, Jul 06 '15 at 11:03
@LaxmikantDange Well thats awkward! Obviously I'm a JS novice - any suggestions on how I can restructure this code to work as expected would be appreciated. The number of ajax calls won't be a known number, hence the $.each() loop. — Kubalicious, Jul 06 '15 at 11:13

score 0 · Accepted Answer · edited May 23 '17 at 11:58

You can collect all defer in an array and then you can pass it to $.when().

Here is your answer

function updateStatus() {
    var triggers = {};

    counter = 0, deferArr = [];


    $("form[type='light_status']").each(function(f) {
      var options = {};
      form = $(this);
      selector = form.attr('selector');
      id = form.attr('id');
      var _d = $.ajax({
        url: '/status/' + selector + '/' + id,
        method: 'GET',
        success: function(data) {
          var data = $(data)[0];
          var switchInput = '#' + data.selector + '-' + data.id;
          if (data.status == 'on') {
            options.status = {
              element: switchInput,
              state: true
            };
          } else {
            options.status = {
              element: switchInput,
              state: false
            };
          }
          options.colour = {
            element: '#' + data.id + '-colourpicker',
            colour: data.colour
          };
          options.kelvin = {
            element: '#' + data.id + '-kelvinpicker',
            colour: data.colour
          };
        }
      });
      deferArr.push(_d)
      triggers[counter] = options;
      counter++;
    })
    $.when.apply($, deferArr).done(function() {
      console.log(triggers); //can see all nested objects
      console.log(triggers[0].colour); //returns null
      console.log('triggers:' + JSON.stringify(triggers)); // can only see parent object
    });

Here is a reference to use array in $.when().

The foreach will push all defer in an array, and then use when method for that array which will wait for completion of all defers, and then executes done method.

Thank you very much for your assistance! – Kubalicious Jul 06 '15 at 11:44 — Kubalicious, Jul 06 '15 at 11:44

Unable to access nested Javascript Object

1 Answers1