將動態表輸入轉換爲嵌套數組json格式

Question

我有一個動態表，我需要將所有數據捕獲到json格式。我不能粘貼代碼爲我的表，但它看起來像這樣：

<table id ="test"> 
<tbody id="Section1" class="theBody"> 
    <tr class="pro" id="Project1"> 
    <td><select class="pro"></select></td> 
    <td><input></input></td> 
    </tr> 
    <tr class="task" id="Task1"> 
    <td><select class="tasks"></select></td> 
    <td><input></input></td> 
    </tr> 
</tbody> 
</table> 

請參考下面的圖片：根據圖片 real table ，當我點擊（+）按鈕頭，它會增加項目+活動行。 當我點擊旁邊的（+）按鈕選擇項目下拉菜單時，它將只爲該項目添加行任務。 一個TBODY只包含一個項目。 一個項目可以有任何數量的活動。

好吧，現在我需要抓住jSOn格式的所有數據。我嘗試運行這段代碼和失敗：

function json() { 

var task = {}; 
var data = {}; 
var tasks = []; 
var taskdetail = []; 
var taskarray = []; 
project = {}; 
    task = {}; 
    tasklist = {}; 

    //date got from bootstrap calendar. 
    var Sdate = $('#startDate').html(); 
    var Edate = $('#endDate').html(); 

    var daterange = { "startDate": Sdate, "endDate": Edate }; 

    task['week'] = daterange; 

    $('.theBody').each(function() { 

     var parent = $(this).attr('id'); 
     var pro = $(this).find('tr:first').attr('id'); 
     //alert(pro); 

     $(this).find('tr:first').each(function() { 
      task2 = {}; 

      var projnameid = $(this).find('td:first'); 
      var projnme = $('.pro', projnameid).val(); 
      task['projectname'] = projnme; 

      $(this).siblings('tr').each(function() { 
       var item = {}; 
       var item2 = {}; 

       var tasknameid = $(this).find('td:first'); 
       var tasknme = $('.task', tasknameid).val(); 
       item['taskname'] = tasknme; 
       taskarray.push(item); 

       $(this).find("input:text").each(function() { 
        var inputname = $(this).attr("name"); 
        var inputvalue = $(this).val(); 

        item['day'] = inputname; 
        item['hour'] = inputvalue; 
        alert(inputname + inputvalue); 
        taskarray.push(item); 

       }); 
      }); 
     }); 
     tasks.push(taskarray); 
     task.tasks = tasks; 
     console.log(task); 
     document.getElementById('output').innerHTML = JSON.stringify(task); 
     event.preventDefault(); 
}); 
} 

我需要的JSON是這樣的容貌：

{ 
    "week":{ 
     "startDate":"2017-01-1", 
     "endDate":"2017-01-7" 
    }, 
    "projectname":"projectname1", 
    "tasks":[ 
     { 
     "taskname":"taskname1", 
     "taskdetail":[ 
     { 
     "day":"sun", 
     "hour":"0" 
     }, 
     { 
     "day":"sat", 
     "hour":"0" 
     } 
     ], 
     } 
    ], 
     "projectname":"projectname2", 
     "tasks":[ 
     { 
     "taskname":"taskname1", 
     "taskdetail":[ 
     { 
     "day":"sun", 
     "hour":"0" 
     }, 
     { 
     "day":"sat", 
     "hour":"0" 
     } 
     ], 
     } 
    ], 
} 

任何幫助/提醒/提示/修正將是受歡迎的雙手。我真的需要你們在這個問題上的專業知識。謝謝

Answer 1

首先，它看起來像你的JSON是無效的，因爲你會有重複的鍵，因此我已經修改你的JSON格式爲以下。

{ 
    "week":{ 
     "startDate":"2017-01-1", 
     "endDate":"2017-01-7" 
    }, 
    "projects":[ 
     { 
      "projectname":"projectname1", 
      "tasks":[ 
       { 
        "taskname":"taskname1", 
        "taskdetail":[ 
         { 
          "day":"sun", 
          "hour":"0" 
         }, 
         { 
          "day":"sat", 
          "hour":"0" 
         } 
        ] 
       } 
      ] 
     }, 
     { 
      "projectname":"projectname2", 
      "tasks":[ 
       { 
        "taskname":"taskname1", 
        "taskdetail":[ 
         { 
          "day":"sun", 
          "hour":"0" 
         }, 
         { 
          "day":"sat", 
          "hour":"0" 
         } 
        ], 
       } 
      ] 
     } 
    ] 
} 

注意：使用工具，如JSONViewer，使其更容易想象。

假設這是你想要的JSON輸出，並且我已經對你的html結構做了一些假設，請看下面的工作html和js代碼。

function json() { 
 
\t var week_data = { 
 
\t \t "startDate": $('#startDate').html(), 
 
\t \t "endDate": $('#endDate').html() 
 
\t }; 
 
\t 
 
\t var projects_data = []; 
 
\t 
 
\t $('.theBody').each(function() { 
 
\t \t var projectname_data = $(this).find('tr.pro select').val(); 
 
\t \t var tasks_data = []; 
 
\t \t 
 
\t \t $(this).find('tr.task').each(function() { 
 
\t \t \t var taskname_data = $(this).find('select.tasks').val(); 
 
\t \t \t var taskdetail_data = []; 
 
\t \t \t 
 
\t \t \t $(this).find('input').each(function() { 
 
\t \t \t \t taskdetail_data.push({ 
 
\t \t \t \t \t day: $(this).attr('name'), 
 
\t \t \t \t \t hour: $(this).val() 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t tasks_data.push({ 
 
\t \t \t \t taskname: taskname_data, 
 
\t \t \t \t taskdetail: taskdetail_data 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t 
 
\t \t projects_data.push({ 
 
\t \t \t projectname: projectname_data, 
 
\t \t \t tasks: tasks_data 
 
\t \t }); 
 
\t }); 
 
\t 
 
\t var output = { 
 
\t \t week: week_data, 
 
\t \t projects: projects_data 
 
\t }; 
 
\t 
 
\t $('#output').html(JSON.stringify(output)); 
 
} 
 

 
$(function(){ 
 
\t json(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="startDate">2017-01-1</div> 
 
<div id="endDate">2017-01-7</div> 
 

 
<table id ="test"> 
 
<tbody id="Section1" class="theBody"> 
 
    <tr class="pro" id="Project1"> 
 
    <td><select class="pro"> 
 
\t <option value="projectname1" selected>projectname1</option> 
 
\t <option value="projectname2">projectname2</option> 
 
    </select></td> 
 
    <td><input /></td> 
 
    </tr> 
 
    <tr class="task" id="Task1"> 
 
    <td><select class="tasks"> 
 
\t <option value="talking">talking</option> 
 
\t <option value="walking" selected>walking</option> 
 
    </select></td> 
 
    <td><input name="mon" value="3" /></td> 
 
    <td><input name="tue" value="9" /></td> 
 
    </tr> 
 
    <tr class="task" id="Task2"> 
 
    <td><select class="tasks"> 
 
\t <option value="talking" selected>talking</option> 
 
\t <option value="walking">walking</option> 
 
    </select></td> 
 
    <td><input name="wed" value="7" /></td> 
 
    <td><input name="thu" value="4" /></td> 
 
    </tr> 
 
</tbody> 
 
<tbody id="Section2" class="theBody"> 
 
    <tr class="pro" id="Project2"> 
 
    <td><select class="pro"> 
 
\t <option value="projectname1">projectname1</option> 
 
\t <option value="projectname2" selected>projectname2</option> 
 
    </select></td> 
 
    <td><input /></td> 
 
    </tr> 
 
    <tr class="task" id="Task3"> 
 
    <td><select class="tasks"> 
 
\t <option value="talking" selected>talking</option> 
 
\t <option value="walking">walking</option> 
 
\t </select></td> 
 
    <td><input name="sun" value="8" /></td> 
 
    <td><input name="sat" value="2" /></td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
<div id="output"></div>