Форум

dekey · #1 (**permalink**) 25.02.2014, 13:04

Добрый день, всем. Есть интересный вопрос, ИМХО, представим, что есть форма с такими полями:

<input name="form.pj" value="1235">
<input name="form.cr" value="123">
<input name="form.app.id" value="1234">
<input name="form.app.fm.id" value="12356">

Из данной формы нужно получить объект вот такого формата:

form{
  "pf": 1235
  "cr": 123
  "app": {
    "id": 1234 
    "fm": {
      "id": 12356
    }
  }
}

ksa · #2 (**permalink**) 25.02.2014, 13:36

Сообщение от dekey

Из данной формы нужно получить объект вот такого формата

Иди в цикле по элементам... Далее анализируй значение атрибута name, при этом примени рекурсию...

danik.js · #3 (**permalink**) 25.02.2014, 13:39

Вобще странная задача. Если данная html-форма не предназначена для отпрваки на сервер, то зачем она тогда вобще нужна? Только чтобы извращенческим способом считать ее js-скриптом и сконвертить в объект?
Но не проще ли прям на сервере сформировать нужную json-структуру и записать в html-страницу? JS'у останется только распарсить json.

рони · #4 (**permalink**) 25.02.2014, 13:40

dekey,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
 <input name="form.pj" value="1235">
 <input name="form.cr" value="123">
 <input name="form.app.id" value="1234">
 <input name="form.app.fm.id" value="12356">
 <script>
    var inp =  document.querySelectorAll("input"), form = {};
    for (var i=0; i<inp.length; i++)  {
      var arr = inp[i].name.split('.'), tmp = form;
      for (var k=1; k<arr.length-1; k++)  { !tmp[arr[k]] && (tmp[arr[k]] = {}) ; tmp = tmp[arr[k]]}
      tmp[arr[k]] = inp[i].value
    }
    alert(JSON.stringify(form));
 </script>
</body>
</html>

dekey · #5 (**permalink**) 25.02.2014, 13:47

Сообщение от danik.js

Вобще странная задача. Если данная html-форма не предназначена для отпрваки на сервер, то зачем она тогда вобще нужна? Только чтобы извращенческим способом считать ее js-скриптом и сконвертить в объект?
Но не проще ли прям на сервере сформировать нужную json-структуру и записать в html-страницу? JS'у останется только распарсить json.

Сам объект будет отправлен на сервер в виде JSON.

dekey · #6 (**permalink**) 25.02.2014, 13:51

Сообщение от рони

dekey,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
 <input name="form.pj" value="1235">
 <input name="form.cr" value="123">
 <input name="form.app.id" value="1234">
 <input name="form.app.fm.id" value="12356">
 <script>
    var inp =  document.querySelectorAll("input"), form = {};
    for (var i=0; i<inp.length; i++)  {
      var arr = inp[i].name.split('.'), tmp = form;
      for (var k=1; k<arr.length-1; k++)  { !tmp[arr[k]] && (tmp[arr[k]] = {}) ; tmp = tmp[arr[k]]}
      tmp[arr[k]] = inp[i].value
    }
    alert(JSON.stringify(form));
 </script>
</body>
</html>

Спасибо. Как раз то, что нужно!

danik.js · #7 (**permalink**) 25.02.2014, 14:12

Ну, чета я фигню написал.
Ок, мой вариант, во много схожий с уже предложенным. Просто чуть более структурированный:

<!DOCTYPE HTML>
<form action="">
	<input name="form.pj" value="1235">
	<input name="form.cr" value="123">
	<input name="form.app.id" value="1234">
	<input name="form.app.fm.id" value="12356">
	<script>
		var formElement = document.querySelector('form');
		var formData = toTree(serializeForm(formElement)).form;
		alert(JSON.stringify(formData));

		function serializeForm(form) {
			return Array.apply(null, form).reduce(function(fields, field) {
				fields[field.name] = field.value;
				return fields;
			}, {});
		}

		function toTree(object) {
			var root = {};
			for (var key in object) {
				var subtree = root;
				var path = key.split('.');
				for (var i = 0; i < path.length - 1; i++) {
					subtree = subtree[path[i]] || (subtree[path[i]] = {});
				}
				subtree[path[i]] = object[key];
			}
			return root;
		}
	</script>
</form>

Не работает в IE8! Хотя исправить очень просто.

рони · #8 (**permalink**) 25.02.2014, 14:20

Сообщение от danik.js

Просто чуть более структурированный

правильно, но неочень понятно.

Maxmaxmaxmaximus8 · #9 (**permalink**) 25.02.2014, 15:08

FormData

dekey · #10 (**permalink**) 25.02.2014, 15:29

спасибо всем!

Форум

Справочник

Discord чат

Курсы javascript