title: how to navigate through complex JSON dynamically in JavaScript
body: <p>I'm trying to navigate through a complex nested JSON, however my attempt didn't get me too far as it keeps returning me the last <code>index</code> JSON.</p>
  
  <p>This is how my Objects looks like, and trying to navigate through it and getting other objs/schemas that are in <code>$ref</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/MfoHO.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/MfoHO.jpg" alt="enter image description here"></a></p>
  
  <p>Raw JSON</p>
  
  <pre><code> {
     "type": "object",
     "properties": {
        "Id": {
           "format": "int32",
           "type": "integer"
        },
        "Status": {
           "enum": [
              "Preparing",
              "AwaitingCompletion",
              "Cancelled",
              "Completed"
           ],
           "type": "string"
        },
        "ExternalReference": {
           "type": "string"
        },
        "Customer": {
           "$ref": "#/definitions/Customer"
        },
        "OrderLineGroups": {
           "type": "array",
           "items": {
              "$ref": "#/definitions/OrderLineGroup"
           }
        },
        "Promotions": {
           "type": "array",
           "items": {
              "$ref": "#/definitions/PromotionSummary"
           }
        },
        "OriginatingSite": {
           "type": "object",
           "properties": {
              "Id": {
                 "format": "int32",
                 "type": "integer"
              },
              "PropertyCode": {
                 "type": "string"
              },
              "StoreCode": {
                 "type": "string"
              }
           }
        },
        "CustomData": {
           "type": "object",
           "additionalProperties": {
              "type": "array",
              "items": {
                 "type": "object"
              }
           }
        }
     }
  }
  </code></pre>
  
  <p>In my code I have done <code>for()</code> and <code>hasOwnProperty()</code>, however my problem is that it doesn't give me all the JSON back even the condition is met (e.g if there's no type property), it only gives the last <code>index</code> or object that doesn't have <code>type</code> property. Also doesn't return me any of the objects if <code>type</code> property is <code>array</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>// Get property of #/definitions/obj
  let prop =  apiDefinition[splitResponse.split('/')[2]].properties;
  console.log([prop])
  var s = [apiDefinition[splitResponse.split('/')[2]].properties];
  
  // Transform JS Object of #/definitions/Obj to JSON 
  var parentJSON = JSON.stringify(apiDefinition[splitResponse.split('/')[2]]);
  
  for (var x in prop) {
    if (prop.hasOwnProperty(x)) {
      if (prop[x].type &amp;&amp; prop[x].type === 'array') {
        console.log('All type Array &gt;&gt; ', x);
        let objKeyProp = apiDefinition[prop[x].items.$ref.split('/')[2]];
        let objJsonStringified = JSON.stringify(objKeyProp);
        let refString = '{"$ref"'+':' + '"' + prop[x].items.$ref + '"}';
        this.compiledJson = JSON.parse(parentJSON.replace(refString, objJsonStringified)); 
      } else if (!prop[x].type) {
        console.log('all arrays &gt;&gt; ', x)
        let objKeyProp = apiDefinition[prop[x].$ref.split('/')[2]];
        let objJsonStringified = JSON.stringify(objKeyProp);
        let refString = '{"$ref"'+':' + '"' + prop[x].$ref + '"}';
        this.compiledJson = JSON.parse(parentJSON.replace(refString, objJsonStringified));
      }
    }
  }
  </code></pre>