Создайте объект JSON из HTML с помощью JQuery

Question

Я хочу создать объект JSON с помощью JQuery. Я написал код JQuery, но он не работает. Здесь я добавил код JQuery в StackExchange.

HTML:

<div id="addconfigurations"> 
    <div class="action DummyAction2" id="10"> 
     <span class="actionname">DummyAction2</span> 
     <div class="actionOptions"> 
      <span class="optionname">Option1</span> 
      <select class="ddl" id="Option1"> 
       <option value="D">D</option> 
       <option value="E">E</option> 
      </select> 
     </div> 
     <div class="actionOptions"> 
      <span class="optionname">Option2</span> 
      <span class="spantxtbox"> 
       <input name="text" class="txtbox" id="Option2" type="text"> 
      </span> 
     </div> 
    </div> 
    <div class="action DummyAction3" id="20"> 
     <span class="actionname">DummyAction3</span> 
     <span>Options:</span> 
     <div> 
     </div> 
     <div class="actionOptions"> 
      <span class="optionname">Option1</span> 
      <select class="ddl" id="Option1"> 
       <option value="AA">AA</option> 
      </select> 
     </div> 
     <div class="actionOptions"> 
      <span class="optionname">Option2</span> 
      <select class="ddl" id="Option2"> 
       <option value="DD">DD</option> 
      </select> 
     </div> 
    </div> 
</div> 

JQuery:

var ScenarioDef = {};    

       var steps = []; 

       $(".action").each(function() { 
        var $this = $(this); 

        steps.push({Name : $this.find('.actionname').text()}); 

        var RequestParams = {}; 

        RequestParams.ActionName = $this.find('.actionname').text()      
        steps.push(RequestParams); 

        var ActionOptions = []; 
        $this.find(".actionOptions").each(function() { 

         var $this1 = $(this); 
         if ($('.ddl').length) { 
          ActionOptions.push({ 
           key: $this1.find('.optionname').text(), 
           value: $this1.find('.ddl :selected').text() 
          }); 
         } else { 
          ActionOptions.push({ 
           key: $this1.find('.optionname').text(), 
           value: $this1.find('.txtbox').text() 
          }); 
         } 

        }); 
        RequestParams.ActionOptions = ActionOptions; 


       }); 

       ScenarioDef.steps = steps; 

Ожидаемый формат JSON.

{ 

    "ScenarioDef": { 
     "steps": [ 
      { 
       "Name": "DummyAction2", 
       "RequestParams": { 
        "ActionName": "DummyAction3", 
        "ActionOptions": [ 
         { "key": "Option1", "value": "AA" }, 
         { "key": "Option2", "value": "DD" }, 
         { "key": "Option3", "value": "" } 
        ] 
       }, 
      }, 
      { 
       "Name": "DummyAction3", 
       "RequestParams": { 
        "ActionName": "DummyAction3", 
        "ActionOptions": [ 
         { "key": "Option1", "value": "AA" }, 
         { "key": "Option2", "value": "DD" }, 
         { "key": "Option3", "value": "" } 
        ] 
       } 
      } 
       ] 
      } 
    } 

Я получаю ниже выхода:

"ScenarioDef": { 
    "steps": [ 
     { "Name": "DummyAction2" }, 
     { 
      "ActionName": "DummyAction2", 
      "ActionOptions": [ { "key": "Option1", "value": "D" }, 
           { "key": "Option2", "value": "" } ] 
     }, 
     { "Name": "DummyAction3" }, 
     { 
      "ActionName": "DummyAction3", 
      "ActionOptions": [ 
       { "key": "Option1", "value": "AA" }, 
       { "key": "Option2", "value": "DD" }, 
       { "key": "Option3", "value": "" } 
      ] 
     } 
    ] 
} 

Answer 1

Это не идеальный ответ.

ниже код поможет вам получить вас.

Но этот ответ совершенно ясен. Может быть, есть некоторые ошибки.

Если вы получите правильный ответ, работать более JQuery-х каждого и селектор проблема

//var ScenarioDef = []; 
var ScenarioDef = {}; 

// $("#addconfigurations .action").each(function() { 
$(".action").each(function() { 
    // var steps = []; 
    var steps = {}; 
    // steps.push({Name: $('.actionname1').text()}); 
    steps.Nmae = $('.actionname').text() 

    //ScenarioDef.push(steps); 
    ScenarioDef.steps=steps; 

    //var RequestParams = []; 
    var RequestParams = {}; 
    //RequestParams.push({ActionName: $('.actionname1').text()}); 
    RequestParams.ActionName= $('.actionname').text() 


    //steps.push(RequestParams); 
    steps.RequestParams = RequestParams; 

    var ActionOptions = [];  
    $(".actionOptions").each(function() { 
     // move to out of each 
     //var ActionOptions = []; 
     // IS NEW!!! 
     var $this = $(this); 
     if ($('.ddl').length) { 
      ActionOptions.push({ 
       //key: $('.optionname').text(), 
       key: $this.find('.optionname').text(), 
       //value: $('.ddl :selected').text() 
       value: $this.find('.ddl :selected').text() 
      }); 
     } else { 
      ActionOptions.push({ 
       //key: $('.optionname').text(), 
       key: $this.find('.optionname').text(), 
       //value: $('.txtbox').text() 
       value: $this.find('.txtbox').text() 
      }); 
     } 
     //RequestParams.push(ActionOptions); 

    }); 
    RequestParams.ActionOptions = ActionOptions; 

    console.log(ScenarioDef); 

    var myJsonString = JSON.stringify(ScenarioDef); 
    console.log(myJsonString); 
}); 

Вашего ответа является знанием объекта и массива.

Объект {}

Объект имеет ключ, пара значение, которое отделяется двоеточием:

{name:'Jone', age:'7'} 

Массив []

Массив имеет только значение, которое отделяется запятой,

['Jone', 'Jane', 'Lora'] 

Но тип значения массива может принимать объект

[{name:'Jone', age:'7'} 
,{name:'Jane', age:'8'} 
,{name:'Lora', age:'9'}] 

Вам необходимо понять эту разницу с объектом и массивом.

Это очень важно для программиста, чтобы создать структуру данных.