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, Feb 20 '14 at 17:17
Maybe this is the problem: [Is Chrome's JavaScript console lazy about evaluating arrays?](http://stackoverflow.com/q/4057440/218196) (applies to objects as well). — Felix Kling, Feb 20 '14 at 17:17
Are you able to do `console.log(JSON.stringify(data, null, 3))`? What does that show? — Vivin Paliath, Feb 20 '14 at 17:20
But even `data[key1]` is giving me an empty object. So that means iterating is not the problem right ? — user1955184, Feb 20 '14 at 17:22
@EdwinDalorzo: I think you are going in the wrong direction here. It's not about the properties of `data`, but about the properties of each of the values in `data`. — Felix Kling, Feb 20 '14 at 17:24
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Felix Kling, Feb 21 '14 at 03:53

gstroup · Accepted Answer · 2014-02-20T18:52:05.103

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 '14 at 18:52

answered Feb 20 '14 at 18:02

gstroup

1,064
8
16

I have added some extra code ,which I think is causing the problem. Can you please take a look at it ? – user1955184 Feb 20 '14 at 18:25
Yes! Even I thought of that ,but then how is `console.log(data)` giving the expected output then ? – user1955184 Feb 20 '14 at 19:13
1

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... – gstroup Feb 20 '14 at 19:51
1

@user: have a look at the link I commented earlier: http://stackoverflow.com/q/4057440/218196. That's the reason why you see the data. – Felix Kling Feb 21 '14 at 03:55

JavaScript Objects - value of a Key empty

1 Answers1