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 根据图片，当我点击标题处的（+）按钮时，它将添加Project + Activity行。当我单击选择项目下拉列表旁边的（+）按钮时，它将仅为该项目添加行任务。一个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代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: