title: Parse JSON dynamically and print key values on html with input checkbox and get a new JSON of selected keys
body: <p>I am trying to parse an unknown JSON whose format could be anything. So, I dont know the keys to access it. I want to access every key in JSON and print out all keys and values on screen using HTML. So I made a recursive function to access every key in JSON and used a variable name html to print the keys.
  here`s the code:</p>
  
  <p>JSON String:</p>
  
  <pre><code>{
      "FetchDetails": {
          "TransactionDetails": {
              "ServiceName": "Airtel Mobile Bill Postpaid",
              "officeID": "209",
              "BillAmount": "931.00",
              "ConsumerName": "Chetan Kumar Yadav",
              "consumerKeysValues": "9352423664",
              "partPaymentAllow": "1",
              "partPaymentType": "Both",
              "lookUpId": "6163298",
              "officeCodeValue": "RATNC011"
          },
          "BillDetails": [{
              "LableName": "Amount Before Due Date",
              "LableValue": "931.00"
          }, {
              "LableName": "Due Date",
              "LableValue": "NA"
          }, {
              "LableName": "Mobile Number",
              "LableValue": "9352423664"
          }, {
              "LableName": "Amount After Due Date",
              "LableValue": "931.00"
          }, {
              "LableName": "Bill Date",
              "LableValue": "NA"
          }, {
              "LableName": "Consumer Name",
              "LableValue": "Chetan Kumar Yadav"
          }, {
              "LableName": "Bill Cycle",
              "LableValue": "NA"
          }, {
              "LableName": "Bill Number",
              "LableValue": "NA"
          }, {
              "LableName": "Account Number",
              "LableValue": "1116231291"
          }]
      }
  }
  </code></pre>
  
  <p>Heres the code to access every key in Parsed JSON</p>
  
  <pre><code>function scan(info) {
    var sub_root = [];
    if (info instanceof Object) {
      for (k in info) {
  
        if (info.hasOwnProperty(k)) {
          console.log('scanning property ' + k);
  
          if (info[k] instanceof Object) {
            me += "&lt;div class='root'&gt; &lt;div class='sub_root'&gt; &lt;input class='node' name='sub_root[" + k + "]' value='" + k + "' type='checkbox' /&gt;" + k;
            console.log(k);
            counter++;
            scan(info[k]);
            me += "&lt;/div&gt;";
            me += "&lt;/div&gt;";
          } else {
            me += "&lt;div class='json_check' &gt;&lt;input class='node' name='sub_root[" + y + "] [" + k + "]' value='" + k + "' type='checkbox' /&gt;" + k + ": " + info[k] + " &lt;/div&gt;";
            scan(info[k]);
            counter++;
          }
        }
      }
    } else {
      console.log('found value : ' + info);
  
    }
  }
  </code></pre>
  
  <p>After this, I am able to access every key in JSON and printed every node in a nested form with checkboxes in front of them to select any node/key.
  Here`s the screenshot: 
  <a href="https://i.stack.imgur.com/WzIB6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WzIB6.png" alt="Fetched JSON keys and printed using HTML"></a></p>
  
  <p><strong>[PROBLEM to be solved]</strong>
  Now at the bottom, I have a submit button, when I click on it I want to form a JSON of checked values with their parent nodes. So like if I check a key with a value, I should get its parent keys along with it.
  For example: I have selected ServiceName and officeID in TransactionDetails, and some array values in BillDetails, so I should get something like this</p>
  
  <pre><code>{
      "FetchDetails": {
          "TransactionDetails": {
              "ServiceName": "Airtel Mobile Bill Postpaid",
              "officeID": "209"
          },
          "BillDetails": [{
              "LableName": "Amount Before Due Date",
              "LableValue": "931.00"
          }, {
              "LableName": "Due Date",
              "LableValue": "NA"
          }, {
              "LableName": "Account Number",
              "LableValue": "1116231291"
          }]
      }
  }
  </code></pre>
  
  <p><strong>[EDITED]</strong>
  To get this JSON format and traverse through HTML objects I am writing this code: </p>
  
  <pre><code>$('#btn_createservice').on('click', function() {
  
          var solid = '{';
          var input = $('input').is(':checked');
          if(input){
              input = $('input');
          }
  
          $('.node:checked').each(function(index) {
              var parentEls = $(this).closest(input)
                .map(function() {
                    solid +=  this.value;
                  return this.value;
                })
                .get()
                .join( ", " );
  
              console.log(parentEls);
  
          });
          solid += '}';
  
          $( ".submit_json" ).html(solid);
  });
  </code></pre>