JavaScript Objects - value of a Key empty

Question

function getDataSets(data){                                                                                                                                                                                                                                                                                        
     console.log(data);                                                                                                                                               
     for(key in data){                                                                                                                                                
         console.log(key,data[key]);                                                                                                                                  
     }
}

I am passing a JavaScript Object (data) to the function getDataSets , when I do console.log(data) I am able to see the object contents - I am able to expand the value of each key (in the Console) and look at their values (which are in turn JavaScript Objects) , as expected. But when the for loop runs over each key and I try to print out the value of each key - I am getting something like <key name> Object {} but value of the key is not an empty object. I guess I am missing something trivial here. Can someone help me out with this?

This is the output I get for console.log(data)

Object {key1: Object, key2: Object, key3: Object, key4: Object, key5: Object}

Even data[key1] is giving me an empty object.

Output for console.log(JSON.stringify(data, null, 3)) is

{
   "key1": {},
   "key2": {},
   "key3": {},
   "key4": {},
   "key5": {}
}

The weird part is that when I run getDataSets(data) directly from the console again , that is if I type directly in the console something like d = getDataSets(data) I am getting the expected output ,the value of the key are non-empty JavaScript Objects.

EDIT-

function getData(platforms){                                                                                                                                         
      var data = {};                                                                                                                                                   
      $.each(platforms,function(index,platform){                                                                                                                       
          data[platform] = {};                                                                                                                                         
          var req = new XMLHttpRequest();                                                                                                                              
          req.onload = function(){                                                                                                                                     
              //Here is the place each key of data is getting its value assigned                                                                                                                
         };                                                                                                                                                           

         req.open('get',<some url>,true);                                                                                          
         req.send();                                                                                                                                                  

     })                                                                                                                                                               
     return data;
}

I am using this getData function to get the data and am sending this to getDataSets. I think problem is that the URL to which getData is requesting is taking some to load,I guess. So it is passing the data even before the URL has been requested,that is why its key has an empty object initialized. But then console.log(data) should not work right?

Also, you should do for(var key in data) and make sure key is a local variable, otherwise it will become global (probably no what you intended) — Edwin Dalorzo
– Edwin Dalorzo, Commented Feb 20, 2014 at 17:17
Maybe this is the problem: Is Chrome's JavaScript console lazy about evaluating arrays? (applies to objects as well). — Felix Kling
– Felix Kling, Commented Feb 20, 2014 at 17:17

gstroup · Accepted Answer · 2014-02-20 18:52:05Z

1

The code you posted looks good. I'm guessing there's something elsewhere in your code that is changing the value of "data" or "key". I ran this code, and it works fine for me in Chrome:

<script type="text/javascript">
    var tmp = {abc: "123", def: {nested: "blah"}, xyz: 456 };
    function test(data) {
        console.log(JSON.stringify(tmp, null, 3));
        for (x in tmp) {
            console.log(x, tmp[x]);
        }
    }
    test(tmp);
</script>

Thanks for posting the additional code, now I see the problem. You're returning the "data" object before the XMLHttpRequest returns. You'll need to store the "data" object in a scope outside of the "getData" function. The "data" object won't be populated until the "onload" handler is called. (Put your logging in the "onload" handler to see what's happening.)

Also be careful, since you're making multiple XMLHTTPRequests, you'll need to keep track of the requests, so you know when all the requests are complete. (They may return in any order.)

edited Feb 20, 2014 at 18:52

answered Feb 20, 2014 at 18:02

gstroup

1,0648 silver badges16 bronze badges

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

4 Comments

user1955184 Over a year ago

I have added some extra code ,which I think is causing the problem. Can you please take a look at it ?

user1955184 Over a year ago

Yes! Even I thought of that ,but then how is console.log(data) giving the expected output then ?

gstroup Over a year ago

Good question… it depends on where you define the "data" variable, and when you call console.log(). When you call it in the debugger, it's probably after all the calls have returned. But in your code, it looks to me like you're only seeing the keys and empty objects which you initialized before calling the service. Since it looks like you're using JQuery, you might want to use $.ajax, and Deferred/Promises to handle the data asynchronously...

Felix Kling Over a year ago

@user: have a look at the link I commented earlier: stackoverflow.com/q/4057440/218196. That's the reason why you see the data.

Collectives™ on Stack Overflow

JavaScript Objects - value of a Key empty

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related