Как подставить в форму данные полученные из ajax запроса?

Question

[Илья]

Получаю объект от сервера с данными о пользователе.

<script>
		function editUser(id) {
			$.ajax({
				type: 'POST',
				url: '/frontend/users_admin/edit',
				data: "id=" + id,
				dataType: 'json',
				success: function(data){
					
				}
			});
		}
	</script>

Есть форма.

<form role="form">
	<div class="form-group">
		<label for="login">Login</label>
		<input type="text" class="form-control" id="loginEdit" name="login" placeholder="Enter login">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Email</label>
		<input type="email" class="form-control" id="emailEdit" name="email" placeholder="Enter email">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Password</label>
		<input type="password" class="form-control" id="passwordEdit" name ="password" placeholder="Password">
	</div>
</form>

Как подставить элементы из полученного объекта в input формы?

Структура ответа.
(Картинка видна при открытии в новой вкладке. Тостер режет размер.)

Comments

[Евгений Петров]

Ничего себе кусочек формы... Где структура ответа?

Answer 1

[Евгений Петров]

HTML

<form name="myname" action="" role="form">
...
</form>

JS

$.ajax({
	url: '/frontend/users_admin/edit',
	data: 'id=' + id,
	type: 'post',
	dataType: 'json'
}).done(function (data) {
	for (var list = Object.keys(data), i = list.length, form = document.myname; i--;) {
		if (form[list[i]]) {
			form[list[i]].value = data[list[i]];
		}
	}
}).fail(function (error) {
	console.log(error);
});

Это при условии, что с сервера приходит объект.

Comments

[Илья]

Спасибо за помощь. Но ларчик открывался намного проще.

<script>
		function editUser(id) {
			$.ajax({
				type: 'POST',
				url: '/frontend/users_admin/edit',
				data: "id=" + id,
				dataType: 'json',
				success: function(data){
					$.each(data, function(){
						$('#loginEdit').val(this.login);
						$('#emailEdit').val(this.email);
					});
				}
			});
		}
	</script>

[Евгений Петров]

@ArtMavir а потом захочется добавить еще одно поле в форму. И придётся лезть в скрипт. Так не делают.
each вместо использования Object.keys — несомненно, раз уж jQuery используем, но вручную указывать имена полей в скрипте — не айс.

[Евгений Петров]

И использовать id для полей формы вместо имён?.. А теперь представим, что у нас появилась необходимость проставить флажки (это которые checkbox), и будете id-ки раздавать направо и налево. очень плохо.

[Евгений Петров]

Да, поскольку ваши знания ещё слабы, скажу, что в вашем коде значение в поля с логином и почтой проставляются очень много раз — столько, сколько полей в ответе.

Либо через each и использовать имена полей полученного объекта для нахождения полей формы (что я и делал), либо без всякого цикла напрямую воткнуть значения этим полям (что есть негибко и далеко от лучших практик).

[Илья]

Всё дело в том, что при использовании вашего метода, ничего не работало. В первом инпуте выводилось просто [Object Object] и всё. Поэтому я и искал иной метод.

[Евгений Петров]

Смотрите jsfiddle.net/petroveg/rxm0f5an