Convert HTML Form to JSON Object

Question

I want to convert a HTML Form to a JSON object. The form basically contains two sections, Header and Detail. The Header section contains some HTML Input boxes and the Detail section is a Table. A dummy view of my Form is as follows.

<!DOCTYPE html>
<html lang="en">
<body>
	<form id="MyForm" method="POST">
	<div name="HeaderData">
		<label id="lblFname">First Name:</label>
		<input type="text" name="fname"/> <br/>
		<label id="lblLname">Last Name:</label>
		<input type="text" name="lname" /> <br/>
		<label id="lblEmail">Email:</label>
		<input type="text" name="email" /> <br/>
	</div>
	<div id="DetailData">
		<table cellspacing="0" align="Center" rules="all" border="1" id="MyTable" style="width:940px;border-collapse:collapse;">
			</thead>		
					<th scope="col">Code</th>
					<th scope="col">Name</th>
					<th scope="col">Continent</th>
					<th scope="col">Region</th>
					<th scope="col">Population</th>
					<th scope="col">Independence Year</th>
			</thead>
			<tbody>
				<tr>
					<td name="Code">Ind</td>
					<td name="Country">India</td>
					<td name="Continent">Asia</td>
					<td name="Region">Asia</td>
					<td name="Population">113Core</td>
					<td name="Independence">1947</td>
				</tr>
				<tr>
					<td name="Code">Ind</td>
					<td name="Country">India</td>
					<td name="Continent">Asia</td>
					<td name="Region">Asia</td>
					<td name="Population">1500000</td>
					<td name="Independence">1947</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</form>
</html>

I would expect the resulting JSON object to mimic:

{"HeaderData":[{"Fname":"XYZ","LName":"ABC","Email":"[email protected]"}],
 "DetailData":[{"Code":"Ind","Name":"India","Continent":"Asia","Region":"Asia","Population":"113 Crore","Independence Year":"1947"}],
 "DetailData":[{"Code":"Ind","Name":"India","Continent":"Asia","Region":"Asia","Population":"113 Crore","Independence Year":"1947"}]
}

I have tried different libraries like jquery.tabletojson.js but they are not able to assign arrays to separate variables.

Later I want to convert this JSON object to an XML String so that I can process it in a SQL Server QUERY. I would expect the XML String to mimic:

enter code here
<Root>
	<HeaderData>
		<FName>XYZ</FName>
		<LName>XYZ</LName>
		<Email>[email protected]</Email>
	</HeaderData>
	<DetailData>
		<Code>Ind</Code>
		<Name>India</Name>
		<Continent>Asia</Continent>
		<Region>Asia</Region>
		<Population>113Crore</Population>
		<IndependenceYear>1947</IndependenceYear>
	</DetailData>
	<DetailData>
		<Code>Ind</Code>
		<Name>India</Name>
		<Continent>Asia</Continent>
        <Region>Asia</Region>
		<Population>113Crore</Population>
		<IndependenceYear>1947</IndependenceYear>
	</DetailData>
</Root>

My current priority is building the JSON STRING. I can convert the data to XML once the JSON is available.

your json example makes no sense. you've got multiple items with the same name. that's not how json works. — I wrestled a bear once.
– I wrestled a bear once., Commented Jun 14, 2016 at 19:24
Shouldn't the DetailData nodes in the XML be wrapped in a parent node? (DetailDatas or something of that nature) — David
– David, Commented Jun 14, 2016 at 19:26
You might consider limiting your question to JSON. The fact that you want to convert the JSON to XML is superflous to your actual question. Your question will be easier to read. — Philip Raath
– Philip Raath, Commented Jun 14, 2016 at 19:48
Hi, Philip Raath, please be informed that here each detail section in the xml would actually be inserted as a row in table. Kindly suggest if you have a way out. — Amit Anand
– Amit Anand, Commented Jun 14, 2016 at 20:58

I wrestled a bear once. · Accepted Answer · 2021-10-20 12:59:10Z

1

if all your <td>'s have a name attribute you can convert it to an object with a few lines of jQuery...

var poop = [];
$("#MyTable").find("tr").each(function(){
    var fart = {};
    if(!$(this).find("td").length) return;
    $(this).find("td").each(function(){
        fart[$(this).attr("name")]=$(this).text();
    });
    poop.push(fart);
});

console.log(poop);

fiddle.

edited Oct 20, 2021 at 12:59

answered Jun 14, 2016 at 19:39

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I wrestled a bear once. Over a year ago

whoever tried to edit the answer, please read the question before editing people's answers. this answer has absolutely nothing to do with a form.

Amit Anand Over a year ago

Hi, Pootie, I have tried the option you provided. But its not fruitful. It returns the json object and arrays. but I want the arrays within variables

Collectives™ on Stack Overflow

Convert HTML Form to JSON Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related