Как заполнить несколько полей ввода из массива объектов

Question

Чего я пытаюсь достичь: - без DOM-вызовов в функции viewData и в целом более чистого подхода к ней.

Мой код и то, что я сделал до сих пор:

function viewData(){
var uid=document.getElementById("viewUserId").value;
for(i in users){
  if(users[i].id==uid){
   document.getElementById("nameEditInput").value=users[i].name;
   document.getElementById("userNameEditInput").value=users[i].username;
   document.getElementById("emailEditInput").value=users[i].email;
   document.getElementById("streetEditInput").value=users[i].address.street;
   document.getElementById("suiteEditInput").value=users[i].address.suite;
   document.getElementById("cityEditInput").value=users[i].address.city;
   document.getElementById("zipEditInput").value=users[i].address.zipcode;
   document.getElementById("latEditInput").value=users[i].address.geo.lat;
   document.getElementById("lngEditInput").value=users[i].address.geo.lng;
}
}

Моя идея:

Я думал дать своим входам общий класс вместо идентификатора (например, "viewInfo") и создать массив, в котором будут храниться мои входные данные.После этого я мог разобрать этот массив и назначить значения моего объекта входному массиву моего класса. Проблема, с которой я столкнулся, заключалась в том, что я не знал, как анализировать мой объект.

var x = document.getElementsByClassName('viewInfo');
for(i in users){
 if(users[i].id==uid){
    for(k in x){
       x[k].value=users[k].[i]; //this gives me an error :Unexpected token [
}}}

Answer 1

Этого можно достичь только с 1 (или 2 ...) вызовами DOM, если вы хотите создать поля ввода с помощью сценариев.

let uuid = document.getElementById('viewUserId').value
let user = users.find(user => user.id == uuid)

if (user) {
  let form = document.createElement('form')

  Object.keys(user).forEach(key => {
    let input = document.createElement('input')

    input.setAttribute(key, user[key])
    input.setAttribute('name', key)

    form.appendChild(input)
  })

  document.append(form)
}

Answer 2

Как насчет хранения значений в объекте. Каждый ключ свойства будет иметь input в HTML с соответствующим именем. Затем вы можете перебирать ключи / значения и добавлять значение к вводу с помощью этого ключа.

const obj = {
  name: 'Bob',
  username: 'bob01',
  email: 'bob@gmail.com',
  address: {
    street: 'Letsby Avenue',
    suite: '999',
    city: 'London',
    zipcode: 90210
  }
};

// Cache the inputs
const inputs = Array.from(document.querySelectorAll('input'));

function addProps(inputs, obj) {

  // Loop over the object entries (k = key, v = value)
  for (let [k, v] of Object.entries(obj)) {

    // If the current property is another object
    // (in this case `address`) call the function again
    // with that object
    if (typeof obj[k] === 'object') {
      addProps(inputs, obj[k]);
    } else {

      // Find the input where the name matches the key
      // and set its value
      inputs.find(input => {
        return input.getAttribute('name') === k;
      }).value = v;
    }
    
  }
}

// Call the function passing in the inputs and data object
addProps(inputs, obj);

<input name="name" />
<input name="username" />
<input name="email" />
<input name="street" />
<input name="suite" />
<input name="city" />
<input name="zipcode" />

Документация

• querySelector
• Object.entries

Answer 3

Во-первых, я бы вывел поиск пользователя из цикла.Тогда document.querySelectorAll() получит все элементы класса.Поскольку идентификаторы html-элементов соответствуют свойствам пользователя, небольшая манипуляция строкой с идентификатором позволит вам установить значение правильного свойства в одном выражении ...

let users = [{
    id: 5,
    name: "Peter",
    email: "peter@gmail.com"
  },
  {
    id: 6,
    name: "Paul",
    email: "paul@yahoo.com"
  },
  {
    id: 7,
    name: "Mary",
    email: "mary@godaddy.com"
  }
];

function clicked() {
  let uid = parseInt(document.getElementById("userId").value);
  let user = users.find(u => u.id === uid);  // lookup the user
  if (!user) {
    alert(`No such uid ${uid}`);
    return;
  }

  document.querySelectorAll('.myClass').forEach(function(el) {
    let elementId = el.id;
    let propName = elementId.replace('EditInput', '');  // the id has a suffix
    el.value = user[propName];  // set the value from the user

  });
}

Enter a user id (5, 6 or 7 are valid) <input id="userId"></input>
<button onClick="clicked()">Go</button><br/><br/>
<input class="myClass" id="nameEditInput"></input>
<input class="myClass" id="emailEditInput"></input>

Answer 4

Вы должны дать своим входам поле имени, которое будет эквивалентным атрибутом в пользовательском объекте

var inputs = document.getElementsByClassName('viewInfo');
const user = users.find(u => { return u.id === uid })
if (user) {
  Object.keys(inputs).forEach(i => {
    let inputName = inputs[i].getAttribute('name')
    inputs[i].value = user[inputName]
  })
}

Для вложенных свойств в пользовательском объекте вы можете использовать имя атрибута, подобное этому
<input name="address.geo.lat" value="74023">
а затем используйте функцию split и рекурсивную функцию, чтобы получить вложенное значение объекта

const users = [
  {
    id: 1,
    name: 'Bob',
    username: 'bob01',
    email: 'bob@gmail.com',
    address: {
      street: 'Letsby Avenue',
      suite: '999',
      city: 'London',
      zipcode: 90210
    }
  },
  {
    id: 2,
    name: 'Bob2',
    username: 'bob02',
    email: 'bob2@gmail.com',
    address: {
      street: 'Letsby Avenue',
      suite: '999',
      city: 'London',
      zipcode: 90210
    }
  }
]

function getNestedValue(obj, keys) {
  let key = keys.shift()
  if (keys.length) {
    return getNestedValue(obj[key], keys)
  }
  return obj[key]
}

function viewData(){
  var uid=document.getElementById("viewUserId").value;
  var inputs = document.getElementsByClassName('viewInfo');
  const user = users.find(u => { return u.id === parseInt(uid) })
  if (user) {
    Object.keys(inputs).forEach(i => {
      let inputName = inputs[i].getAttribute('name');
      inputs[i].value = getNestedValue(user, inputName.split('.'))
    })
  }
}
viewData()

<html>
  <body>
    <form>
      <input type="hidden" id="viewUserId" value="2">
      <input class="viewInfo" name="name">
      <input class="viewInfo" name="username">
      <input class="viewInfo" name="email">
      <input class="viewInfo" name="address.street">
      <input class="viewInfo" name="address.suite">
      <input class="viewInfo" name="address.city">
      <input class="viewInfo" name="address.zipcode">
    </form>
  </body>
</html>

Здесь вы можете найти обратную функцию

const users = [
  {
    id: 1,
    name: 'Bob',
    username: 'bob01',
    email: 'bob@gmail.com',
    address: {
      street: 'Letsby Avenue',
      suite: '999',
      city: 'London',
      zipcode: 90210
    }
  },
  {
    id: 2,
    name: 'Bob2',
    username: 'bob02',
    email: 'bob2@gmail.com',
    address: {
      street: 'Letsby Avenue',
      suite: '999',
      city: 'London',
      zipcode: 90210
    }
  }
]

function generateNestedValue(obj, keys, value) {
  let key = keys.shift()
  if (keys.length) {
    obj[key] = obj[key] || {}
    generateNestedValue(obj[key], keys,  value)
    return
  }
  obj[key] = value
}

function generateUser(){
  var inputs = document.getElementsByClassName('viewInfo');
  let user = {}
  Object.keys(inputs).forEach(i => {
    let inputName = inputs[i].getAttribute('name');
    generateNestedValue(user, inputName.split('.'), inputs[i].value)
  })
  console.log(user)
}
generateUser()

<html>
  <body>
    <form>
      <input class="viewInfo" name="id" value="2">
      <input class="viewInfo" name="name" value="Bob">
      <input class="viewInfo" name="username" value="bob01">
      <input class="viewInfo" name="email" value="bob@gmail.com">
      <input class="viewInfo" name="address.street" value="Via Ciro Fanigliulo">
      <input class="viewInfo" name="address.suite" value="4">
      <input class="viewInfo" name="address.city" value="Grottaglie">
      <input class="viewInfo" name="address.zipcode" value="74023">
    </form>
  </body>
</html>