Javascript Object Keys Not Resolved Until After console.log Is Expanded

Question

I am having the same issue as this stackoverflow question. While that question was answered, a resolution was not provided.

I have a javascript object where console.log(anObject) shows all of the keys, but console.log(JSON.stringify(anObject)) does not show them all, it only shows 1 of the 2.

What is the cause of this at the javascript (not console) level and how can I resolve this so that the code that follows this segment can access all of the keys?

Is there a way to force object resolution?

Thanks in advance.

---

It is wrapped inside of a getJson which is asynchronous, but ironically the data being left out is not the json result data. I'm using the cytoscape.js library. The problem occurs around line 5183 of the cytoscape.js file in this section where it is parsing my xar (elements array) as shown below. The data key is there, but not the group key unless it is expended in console.

      // specify via opts.nodes and opts.edges
  else if( $$.is.plainObject(opts) && ($$.is.array(opts.nodes) || $$.is.array(opts.edges)) ){
    var elesByGroup = opts;
    var jsons = [];

    var grs = ['nodes', 'edges'];
    for( var i = 0, il = grs.length; i < il; i++ ){
      var group = grs[i];
      var elesArray = elesByGroup[group];

      if( $$.is.array(elesArray) ){

        for( var j = 0, jl = elesArray.length; j < jl; j++ ){
              //console.log(JSON.stringify(elesArray[j]))
          if ( typeof elesArray[j] !== "undefined" ) {
              var json = elesArray[j];
              console.log(elesArray[j].data)
              json.group = group;
              jsons.push( json );
          }
        }
      }
    }

---

 $(document).ready(function() {

 function notInArray(value, array) {
     return array.indexOf(value) == -1;
 }

 var node_array = new Array();
 var edge_array = new Array();

 var full_data;

 var xar = new Object();

 xar.nodes = [];
 xar.edges = [];

 $.getJSON("http://127.0.0.1/loctest", function(xad) {
     full_data = xad;
     var i = 0;
     $.each(xad, function(key, val) {
         s = val.src;
         d = val.dst;
         if (notInArray(s, node_array)) {
             node_array.push(s);
             xar.nodes[i] = {
                 data: {
                     id: s
                 }
             };
             i++;
         }
         if (notInArray(d, node_array)) {
             node_array.push(d);
             xar.nodes[i] = {
                 data: {
                     id: d
                 }
             };
         }
         xar.edges[i] = {
             data: {
                 id: i.toString(),
                 weight: 3,
                 source: s,
                 target: d
             }
         };
         i++;
     });

     //console.log(xar);
     $('#cy').cytoscape({
         //container: document.getElementById('cy'),

         style: cytoscape.stylesheet()
             .selector('node')
             .css({
                 'content': 'data(id)'
             })
             .selector('edge')
             .css({
                 'target-arrow-shape': 'triangle',
                 'width': 4,
                 'line-color': '#ddd',
                 'target-arrow-color': '#ddd'
             })
             .selector('.highlighted')
             .css({
                 'background-color': '#61bffc',
                 'line-color': '#61bffc',
                 'target-arrow-color': '#61bffc',
                 'transition-property': 'background-color, line-color, target-arrow-color',
                 'transition-duration': '0.5s'
             }),

         elements: xar,

         layout: {
             name: 'breadthfirst',
             directed: true,
             roots: '#a',
             padding: 10
         }
     });


     console.log(cy);
     var bfs = cy.elements().bfs('#a', function() {}, true);

     var p = 0;
     var highlightNextEle = function() {
         bfs.path[p].addClass('highlighted');

         if (p < bfs.path.length) {
             p++;
             setTimeout(highlightNextEle, 1000);
         }
     };

     // kick off first highlight
     highlightNextEle();

 });

});

Answer 1

JSON.stringify only lists enumerable own properties.

This is explained in 15.12.3:

The abstract operation JO(value) serializes an object.

Let K be an internal List of Strings consisting of the names of all the own properties of value whose [[Enumerable]] attribute is true. The ordering of the Strings should be the same as that used by the Object.keys standard built-in function.

So if you don't see the property, it can mean

• The property has not been added yet. Note console.log may be asynchroneous, so the property might be added after calling log but be displayed in the console
• The property is inherited instead of own
• The property is not enumerable