Question

我要实现的目标：-在viewData函数中进行更少的DOM调用，并且总体上实现了更为简洁的方法。

我的代码和到目前为止所做的事情：

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;
}
}

我的想法：

我想到给输入一个通用类而不是一个ID（例如“ 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

您必须在输入中输入一个名称字段，该名称将成为用户对象中的等效属性

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>

Answer 2

如何将值存储在对象中。每个属性键在HTML中将有一个input，带有相应的名称。然后，您可以遍历键/值，并使用该键将值添加到输入中。

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" />

文档

Answer 3

首先，我将从循环中查找用户。然后，Nat.eqb将获得类的所有元素。由于html元素ID与用户属性匹配，因此对ID进行一些字符串操作即可让您在单个语句中设置正确属性的值...

nat

count

Answer 4

如果您愿意使用脚本创建输入字段，则只需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)
}

如何从对象数组填充多个输入字段

4 个答案:

文档