JSONを動的に解析し、入力チェックボックスを使ってhtmlのキー値を出力し、選択したキーの新しいJSONを取得します。

Question

形式が不明な未知のJSONを解析しようとしています。だから、私はそれにアクセスするための鍵を知らない。 JSONのすべてのキーにアクセスし、HTMLを使用して画面上のすべてのキーと値を出力したいと考えています。だから私はJSONのすべてのキーにアクセスするための再帰的な関数を作り、変数名htmlを使ってキーを印刷しました。

JSON文字列：： コードhere`s

{ 
    "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" 
     }] 
    } 
} 

相続人はこの後

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 += "<div class='root'> <div class='sub_root'> <input class='node' name='sub_root[" + k + "]' value='" + k + "' type='checkbox' />" + k; 
      console.log(k); 
      counter++; 
      scan(info[k]); 
      me += "</div>"; 
      me += "</div>"; 
     } else { 
      me += "<div class='json_check' ><input class='node' name='sub_root[" + y + "] [" + k + "]' value='" + k + "' type='checkbox' />" + k + ": " + info[k] + " </div>"; 
      scan(info[k]); 
      counter++; 
     } 
     } 
    } 
    } else { 
    console.log('found value : ' + info); 

    } 
} 

解析されたJSON内のすべてのキーにアクセスするためのコードを、私は、JSONの全てのキーにアクセスすることができていますネストされたフォームのすべてのノードをチェックボックスで表示し、ノード/キーを選択します。 Here`sスクリーンショット：

[解決すべき問題] は今一番下に、私はそれをクリックしたときに、私は彼らの親でチェック値のJSONを形成したい、送信ボタンをしていますノード。キーで値を確認する場合と同様に、親キーを取得する必要があります。 例えば：私はTransactionDetails中のServiceNameとofficeIDを選択している、とBillDetailsでいくつかの配列値、私は は、このJSON形式を取得し、HTMLオブジェクトを横断するには、この

{ 
    "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" 
     }] 
    } 
} 

[EDITED]のようなものを取得する必要があります私はこのコードを書いています：

$('#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); 
}); 

Answer 1

あなたはすべて含むの要素を取得していない.closest()ので、.parents()を使用する必要があります。

次に、必要に応じてこれらの名前を含むプロパティを作成します。

$("#btn_createservice").on("click", function() { 
    var svc_obj = {}; 
    $(".node:checked").each(function() { 
     var cur_obj = svc_obj; 
     $(this).parents(".node").map(function() { 
      return this.value; 
     }).get().reverse().forEach(function(name) { 
      if (!cur_obj[name]) { // create property if it doesn't already exist 
       cur_obj[name] = {}; 
      } 
      cur_obj = cur_obj[name]; // use this for next iteration; 
     }); 
     var thisname = this.name.match(/\[([^[])+\]$/)[1]; // Get property name from name="sub_root[...]" 
     cur_obj[thisname] = this.value; 
    }); 
    $(".submit_json").html(JSON.stringify(svc_obj)); 
}) 

あなたは、チェックボックスがvalue='" + info[k] "'を持っているように、あなたが作成しているHTMLを修正する必要があります。