Запись в input value значения из объекта

@n0kk · Регистрация: 31.12.2014

Студворк — интернет-сервис помощи студентам

Доброго времени всем, возникла такая задача, кручу, верчу ни как не доходит, есть объект который хранит в себе значения, как из этого объекта поместить значения в input value?

HTML5
1
2
3
4
<input type="text" class="form-control" data-rule="name" id="validationServer01" value="">
<input type="text" class="form-control" data-rule="telephone" id="validationServer02" value="">
<input type="text" class="form-control" data-rule="email" id="validationServer03" value="">
<input type="text" class="form-control" data-rule="password" id="validationServer04" value="">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const allInputs = document.querySelectorAll('input[data-rule]');
 
const exampleValInput = {
        valNameEx: 'text',
        valTelEx: 'text2',
        valEmailEx: 'value555',
        valPassEx: 'books',
        valConfirmPassEx: 'books2',
    };
 
    const validateRules = {
        exampleValInput,
 
        setValInputEx(input) {
 
            let valArr = [];
            for (let [key, val] of Object.entries(exampleValInput)) {
                valArr.push(val)
            }
            valArr.forEach(element => input.value = element);
 
        },
 
validationEmptyInputsSubmit() {
            for (let input of allInputs) {
                this.setValInputEx(input);
},
}

можно было конечно проводит перебор значений по массиву и каждую новую итерацию создавать новый input но они уже присутствуют на странице, поэтому итерации у нас их 2, не считая получения значений из объекта, а как их соединить не доходит...

@klopp · 15.02.2020, 07:27

У вас инпутов 4, а свойств в объекте 5, как вы их собираетесь все запихать? Еще и лишняя запятая в exampleValInpu.
Я бы сделал чтобы имена совпадали: свойства в exampleValInpu и в атрибуте data-rule, и тогда в цикле

JavaScript
1
2
3
4
5
6
7
8
let allInputs = document.querySelectorAll('input[data-rule]');
let exampleValInput = {
    name: 'text',
    telephone: 'text2',
    email: 'value555',
    password: 'books'
};
allInputs.forEach(el => el.value = exampleValInput[el.getAttribute('data-rule')]);

@n0kk · 15.02.2020, 11:59 **[ТС]**

На самом деле их 5, пропустил 1 по невнимательности <input type="text" class="form-control" data-rule="reppassword" id="validationServer05" value="5">

@amr-now · 15.02.2020, 12:27

n0kk, klopp, foreach применяйте. Уже можно.
Поддержка Internet Explorer 11 крупными сайтами прекращается.

JavaScript
1
for (let  el of allInputs) el.value = exampleValInput[el.dataset.rule];

Если острая необходимость поддерживать древние браузеры, то сейчас TypeScript хорошо транспилирует в синтасис ES5.

Добавлено через 19 минут
----
Вот ещё неплохое извращение, если неохота приводить в соответствие названия свойств:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <input type="text" class="form-control" data-rule="name" id="validationServer01" value="">
    <input type="text" class="form-control" data-rule="telephone" id="validationServer02" value="">
    <input type="text" class="form-control" data-rule="email" id="validationServer03" value="">
    <input type="text" class="form-control" data-rule="password" id="validationServer04" value="">
    <input type="text" class="form-control" data-rule="reppassword" id="validationServer05" value="5">
    <script>
        const allInputs = document.querySelectorAll('input[data-rule]');
        const exampleValInput = {
            valNameEx: 'text',
            valTelEx: 'text2',
            valEmailEx: 'value555',
            valPassEx: 'books',
            valConfirmPassEx: 'books2'
        };
        let i = 0;
        for (let key in exampleValInput) allInputs[i++].value = exampleValInput[key];
    </script>
</body>
</html>

@klopp · 15.02.2020, 12:44

amr-now,

Цикл for...in проходит по свойствам в произвольном порядке. Порядок прохода может отличаться в зависимости от браузера

есть риск что значения подставятся не в те инпуты

@amr-now · 15.02.2020, 13:29

klopp, в современной спецификации в определенном порядке. Так что условно можно сказать, что в современной Мозилле и всех хромоногах работать будет правильно.
MS Edge как раз 15 января этого года умер. Останется перекрашенный хромоног.

Добавлено через 34 минуты

13.7.5.15EnumerateObjectProperties ( O )
...
EnumerateObjectProperties must obtain the own property keys of the target object by calling its [[OwnPropertyKeys]] internal method.
...
9.1.11 [[OwnPropertyKeys]] ( )
When the [[OwnPropertyKeys]] internal method of O is called, the following steps are taken:
Return ! OrdinaryOwnPropertyKeys(O).
9.1.11.1 OrdinaryOwnPropertyKeys ( O )
When the abstract operation OrdinaryOwnPropertyKeys is called with Object O, the following steps are taken:
Let keys be a new empty List.
For each own property key P of O that is an array index, in ascending numeric index order, do
Add P as the last element of keys.
For each own property key P of O that is a String but is not an array index, in ascending chronological order of property creation, do
Add P as the last element of keys.
For each own property key P of O that is a Symbol, in ascending chronological order of property creation, do
Add P as the last element of keys.
Return keys.

klopp, то есть при перечислении собственных перечисляемых свойств объекта порядок гарантирован в спецификации.
Порядок перебора унаследованных свойств не гарантирован, но для используемых в программировании Data-Transfer-Object, которые не нуждаются в наследовании, порядок перебора определён.

Добавлено через 31 секунду
https://www.ecma-international... properties

@klopp · 15.02.2020, 17:35

а Safari ?
мне тут по верстке заясняли что флексы еще рано использовать, надо на флоатах сидеть, а то вдруг ИЕ8 у пользователя? )))

@n0kk · 15.02.2020, 22:35 **[ТС]**

klopp, amr-now, благодарю за помощь, и так и так верно, но остановлюсь на втором варианте, так как свойства переименовывать не нужно, по поводу поддержки браузерами, пишу под узкую аудиторию, я буду знать каким браузерами пользуются.

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@n0kk 0 / 0 / 2 Регистрация: 31.12.2014 Сообщений: 226
	15.02.2020, 11:59 [ТС]
	На самом деле их 5, пропустил 1 по невнимательности <input type="text" class="form-control" data-rule="reppassword" id="validationServer05" value="5"> 0

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	15.02.2020, 17:35
	а Safari ? мне тут по верстке заясняли что флексы еще рано использовать, надо на флоатах сидеть, а то вдруг ИЕ8 у пользователя? ))) 1

@n0kk 0 / 0 / 2 Регистрация: 31.12.2014 Сообщений: 226
	15.02.2020, 22:35 [ТС]
	klopp, amr-now, благодарю за помощь, и так и так верно, но остановлюсь на втором варианте, так как свойства переименовывать не нужно, по поводу поддержки браузерами, пишу под узкую аудиторию, я буду знать каким браузерами пользуются. 0

Запись в input value значения из объекта

Решение