将动态表输入转换为嵌套数组json格式

Question

i have a dynamic table and i need to capture all data into json format. i cannot paste code for my table, but it looks like this:

<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>

Please refer the image below: real table Based on the picture, when i click (+) button at the header, it will add Project+Activity row. When i click (+) button next to select project dropdown, it will add row task only for that project. One TBODY contains only one project. one project can have any number of activity.

Okay, now i need to grab all the data in jSOn format. I try to run this code and failed:

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

I need the json to be looks like this:

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

Any help/advise/tips/correction will be welcome with both hands. I really need your guys expertise in this issues. Thanks

Answer 1

First, it seems like your json is invalid because you would have duplicate key, therefore I have modify your json format to be as per following.

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

Note: Use tool like JSONViewer to make it easier to visualize.

Assuming this is the JSON output that you want, and I've made some assumptions on your html structure, please see the working html and js code below.

 function json() { var week_data = { "startDate": $('#startDate').html(), "endDate": $('#endDate').html() }; var projects_data = []; $('.theBody').each(function() { var projectname_data = $(this).find('tr.pro select').val(); var tasks_data = []; $(this).find('tr.task').each(function() { var taskname_data = $(this).find('select.tasks').val(); var taskdetail_data = []; $(this).find('input').each(function() { taskdetail_data.push({ day: $(this).attr('name'), hour: $(this).val() }); }); tasks_data.push({ taskname: taskname_data, taskdetail: taskdetail_data }); }); projects_data.push({ projectname: projectname_data, tasks: tasks_data }); }); var output = { week: week_data, projects: projects_data }; $('#output').html(JSON.stringify(output)); } $(function(){ 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"> <option value="projectname1" selected>projectname1</option> <option value="projectname2">projectname2</option> </select></td> <td><input /></td> </tr> <tr class="task" id="Task1"> <td><select class="tasks"> <option value="talking">talking</option> <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"> <option value="talking" selected>talking</option> <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"> <option value="projectname1">projectname1</option> <option value="projectname2" selected>projectname2</option> </select></td> <td><input /></td> </tr> <tr class="task" id="Task3"> <td><select class="tasks"> <option value="talking" selected>talking</option> <option value="walking">walking</option> </select></td> <td><input name="sun" value="8" /></td> <td><input name="sat" value="2" /></td> </tr> </tbody> </table> <div id="output"></div>