时间戳

首页 > 解决方案 > 如何从对象数组中填充多个输入字段

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

问题描述

我要实现什么：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 [
}}}

标签： javascripthtmljavascript-objects

解决方案

您必须为您的输入提供一个名称字段，这将是用户对象中的等效属性

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">
，然后使用拆分和递归函数来获取对象的嵌套值

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>

推荐阅读