已知JSON对象非空值的字段返回空字符串

Question

I have an object containing share counts for various social metrics. The object looks like this:

Object{
delicious: 0,
facebook: {
    comments: 0,
    likes: 0,
    shares: 0,
    total: 0,
},
linkedIn: 1,
pinterest: 0,
twitter: 9
}

Here is some testing code I am using to try to access my object:

    console.log(bg.results);
    console.log(bg.results["facebook"]);
    console.log(bg.results.facebook);

Object.keys(bg.results).forEach(function(key){
    console.log(bg.results);
    console.log(key + "->" + bg.results[key]);
});

The object above is what I am seeing in the console, so I know that the fields in bg.results contain data. The problem is, when I try to access any of these fields using either dot syntax or by using object["key"] I get an empty string as the result. I searched and could not find anyone else experiencing the same problem. Does anyone have any ideas why this may be happening?

Some additional info: My code is being run within the context of a chrome extension. I'm accessing this object from a popup page, and the object's data is being supplied from my background page.

Thank you for your assistance.

UPDATE

Something funny is going on with how Chrome is handling my code. The data in bg.results is supplied by a function on my background page called update. In my program there are two ways that update is called depending on the user's settings. When update() is called from within the context of my background page, everything works fine and behaves as expected. When update() is called from my popup page, I get empty strings when I try to access any fields.

This seems like a bug very particular to how chrome extensions are handled, so any input from experts in this sort of thing would be awesome. Thanks for the help everyone!

Answer 1

1.) your code should work. facebook is an object itself so you need to think about that, and maybe use a recursive function!

2.) why dont you just loop over your objects properties with the for-in-loop?

for(key in bg.results) {
   console.log(key);
}

3.) example recursive function

function recursiveExample(obj) {
  var current;
  for(key in obj) {
   current = obj[key];
   if(typeof current === 'object' && !Array.isArray(current)) {
     recursiveExample(current);  
   }
   console.log("key: " + key + " - value" + current);
  }
}

Answer 2

I've concluded that my values were not completely loaded into the results object when I was trying to access them. I can only speculate as to why I could see the values when I printed the results object to the console (and could not access them at that point) but was not able to access them until later. Below is the solution I used for this problem.

function checkLoaded(results){
    var isLoaded = true;
    $.each(results, function(key, value){
        if(value === "" || value === undefined){
            isLoaded = false;   
        }
    });

    setTimeout(function(){
         if(!isLoaded){
            checkLoaded(results);
         }
         else{
            displayHandler(results);
         }
    }, 500);

}

If anyone knows why I could see the values in the console but could not access them, I'd appreciate an explanation. But otherwise, if anyone else encounters a problem like this, try setting up a delay to make sure that your values are completely loaded into your collection.

Answer 3

This is just a guess (since you haven't posted any of the relevant data-loading code), but I suspect you may be doing something like this:

chrome.extension.sendMessage({myAction: "update"}, function(response) {
     bg.results = response;
});

// we try to use bg.results, but the sendMessage callback won't be run until later on
Object.keys(bg.results).forEach(function(key){
    console.log(bg.results);
    console.log(key + "->" + bg.results[key]);
});

The ansychronous callback passed to sendMessage runs after the current function stack has cleared (ie, once the JavaScript thread has run out of other things to do), so bg.results = response won't happen until after you try to use it. Instead, use the results inside the callback :

chrome.extension.sendMessage({myAction: "update"}, function(response) {
     bg.results = response;

    // now it works, because this code is inside the callback
    Object.keys(bg.results).forEach(function(key){
        console.log(bg.results);
        console.log(key + "->" + bg.results[key]);
    });
});

Maybe you don't actually use chrome.extension.sendMessage , but you must be using some asynchronous operation (maybe Ajax, maybe another Chrome API call). I don't know what that method is for certain, since you didn't post any of your data-loading code.