Why can I not iterate over this object?

Question

I am trying to iterate over an object, but the jquery $.each won't fire. This is the outcome of the $fileNames variable:

and this is the code I've built so far:

$("input[type=button]").on("click", function(){
$searchtag = '';
$files = '';
$fileNames = {};

// first get all files in the directory
$.ajax({
  url: "php/cse.php",
  data: "requestFileNames=true",
  method: "POST",
  success: function(result){
    $result = JSON.parse(result).toString();
    $result += ",";
    $count = ($result.match(/o/g)||[]).length + 1;
    for (var i = 1; i <= $count; i++) {
      $fname = $result.substr(0, $result.indexOf(','));
      $fileNames[$fname] = {};
      $result = $result.replace($fname + ",", "");
    }
  }
});

console.log($fileNames);
$.each($fileNames, function(key, value){
  // this does not fire, for some reason.
});

});

Why is it not working?

So, why can I console log it, but not iterate thought it? Doesn't make sense. I get what asyncronous means, but this shouldn't be the case. — Gerrit Luimstra, Jul 29 '16 at 22:50
also ... `JSON.parse(result).toString();` will ALWAYS result in the value **"[object Object]"** - which is probably not what you want — Jaromanda X, Jul 29 '16 at 22:51
`console.log()` is always going to get called before the callback `success()` handler where you have it. Move the `console.log()` and `$.each()` into the `success()` handler and you *might* see different results (depending on if the `$.ajax()` request returns anything). — Jared Farrish, Jul 29 '16 at 22:52
@JaredFarrish This is not the question, THAT works as shown in the image (it needs improvement, sure, but not my question). My question is; Why can I not iterate through this seemingly normal object? — Gerrit Luimstra, Jul 29 '16 at 22:55
Ahh. Because the `console` will update the object once you open and view it. so it *appears* it was there, but at the time `console.log()` was called, it was empty. Confirm by logging `console.log(JSON.stringify($fileNames))` instead. I myself think this is confusing and is done for memory considerations AFAICT. — Jared Farrish, Jul 29 '16 at 22:57
It works when I put it in the succes handler, BUT, why does the console log work, eventhough it's not in the succes handler, but the .each doesn't? Can someone explain this to me? — Gerrit Luimstra, Jul 29 '16 at 22:57
@JaredFarrish Thank you! The explanation I was looking for! :) — Gerrit Luimstra, Jul 29 '16 at 22:58
You can also open the console and run `var a = {a:1,b:2,c:3}`, then log it. You'll see the response includes the key/value pairs, whereas the screenshot indicates an empty object. — Jared Farrish, Jul 29 '16 at 23:02

score -2 · Answer 1 · answered Jul 29 '16 at 22:59

Make async false, but this will pause the code.

$.ajax({
      url: "php/cse.php",
      data: "requestFileNames=true",
      method: "POST",
      **async: false,**
      success: function(result){
        $result = JSON.parse(result).toString();
        $result += ",";
        $count = ($result.match(/o/g)||[]).length + 1;
        for (var i = 1; i <= $count; i++) {
          $fname = $result.substr(0, $result.indexOf(','));
          $fileNames[$fname] = {};
          $result = $result.replace($fname + ",", "");
        }
      }
    });

Or call the function (i.e. $.each()) within success or complete method

Very, very rarely is it suggested to use `async: false`. – Jared Farrish Jul 29 '16 at 23:03 — Jared Farrish, Jul 29 '16 at 23:03

Why can I not iterate over this object?

1 Answers1