Задать вопрос
zorro76
@zorro76
javascript

Как динамически отобрать те, ключи которых совпадают с полями формы и заполнить ими форму?

Есть форма:

<!DOCTYPE html>
<html>
	<head>
		<title>FE-Course. Part 3 | Registration form</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<header class="container">
			<h1 class="text-center">Registration form</h1>
		</header>
		<section class="container">
			<form name="registration" class="form-horizontal" data-toggle="validator">
				<div class="form-group required">
					<legend class="col-sm-12">Registration info</legend>
				    <div class="col-sm-6">
				      <input type="text" class="form-control" id="name" placeholder="Full Name" required>
				    </div>
				    <div class="col-sm-6">
				      <input type="text" class="form-control" id="login" placeholder="Login" required>
				    </div>
				</div>
				<div class="form-group">
				    <div class="col-sm-6">
				      <input type="email" class="form-control" id="email1" placeholder="Email" required>
				    </div>
				    <div class="col-sm-6">
				      <input type="email" class="form-control" id="email2" placeholder="Confirm Email" required>
				    </div>
				</div>
				<div class="form-group">
				    <div class="col-sm-6">
				      <input type="password" class="form-control" id="password1" placeholder="Password" required>
				    </div>
				    <div class="col-sm-6">
				      <input type="password" class="form-control" id="password2" placeholder="Confirm Password" required>
				    </div>
				</div>
				<fieldset>
					<legend>Address</legend>
					<div class="form-group">
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="city" placeholder="City" required>
					    </div>
					    <div class="col-sm-2">
					      <input type="text" class="form-control" id="zip" placeholder="ZIP Code">
					    </div>
					</div>
					<div class="form-group">
						<div class="col-sm-5">
							<select class="form-control" id="state" name="state">
							  <option value="_none">Select State</option>
							  <option value="value1">State 1</option> 
							  <option value="value2">State 2</option>
							  <option value="value3">State 3</option>
							</select>
						</div>
						<div class="col-sm-5">
					      <input type="text" class="form-control" id="street" placeholder="Street">
					    </div>
					    <div class="col-sm-2">
					      <input type="text" class="form-control" id="building" placeholder="Building">
					    </div>
					</div>
				</fieldset>
				<fieldset>
					<legend>Your Hobbies</legend>
					<div class="form-group">
						<div class="checkbox col-sm-3">
						    <label>
						      <input type="checkbox"> Music
						    </label>
						</div>
						<div class="checkbox col-sm-3">
						    <label>
						      <input type="checkbox"> Cycling
						    </label>
						</div>
						<div class="checkbox col-sm-3">
						    <label>
						      <input type="checkbox"> Front End
						    </label>
						</div>
						<div class="checkbox col-sm-3">
						    <label>
						      <input type="checkbox"> Girls
						    </label>
						</div>
					</div>
				</fieldset>
				<div class="form-group">
				    <div class="col-sm-12">
				    	<legend>How did you hear about us?</legend>
				      	<select class="form-control" id="about">
						  <option value="_none">Select Please</option>
						  <option value="value1">Google</option> 
						  <option value="value2">Friends</option>
						  <option value="value3">Newspapers</option>
						</select>
				    </div>
				</div>
				<button class="btn btn-primary btn-lg center-block" type="submit">Register Profile</button>
			</form>
		</section>
		<script src="jquery-2.1.3.min.js"></script>
		<script src="main.js"></script>
	</body>
</html>


с помощью ajax получены данные с сервера:

$.ajax({
	url: 'https://randomuser.me/api/',
	dataType: 'json',
	success: function(data){
		console.log(data);
	}
});

Как динамически отобрать те, ключи которых совпадают с полями формы и заполнить ими форму?
  • Вопрос задан
  • 247 просмотров
2 комментария
Подписаться 3 Оценить 2 комментария
Решения вопроса 1
Cat_Boris
@Cat_Boris
Front-end developer
Если имеется ввиду заполнение только текстовых полей, то вот вариант:

var props = {};

$.ajax({
  url: 'https://randomuser.me/api/',
  dataType: 'json',
  success: function(data){
    var user = data.results[0].user,
        list = $('.form-control'),
        prop;

    deepSearch(user);
    
    for (var i = 0, len = list.length; i < len; i += 1) {
      prop = props[ $(list[i]).attr('id') ];
      if ( prop ) $(list[i]).val(prop);
    }
      
  }
});


function deepSearch(node) {
  for (var elem in node) {
    if ( typeof node[elem] !== 'object' || isObjectEmpty(node[elem]) ) {
      props[elem] = node[elem];
    } else {
       deepSearch(node[elem]); 
    }
  }
}
  

function isObjectEmpty(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}
Ответ написан
13 комментариев
13 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка сайта на Python + TypeScript
15 нояб. 2024, в 16:25
50000 руб./за проект
Разработать frontend для веб приложения на React.js
15 нояб. 2024, в 16:23
30000 руб./за проект
Сверстать небольшой лэндинг
15 нояб. 2024, в 16:23
2500 руб./за проект
Ещё заказы