javascript - 使用对象中的值填充嵌套名称的输入

Question

我有这样的输入:

<input type="text" id="contact[actif]" name="contact[actif]">
<input type="text" id="contact[sql]" name="contact[sql]">
<input type="text" id="interlocuteur[actif]" name="interlocuteur[actif]">
<input type="text" id="interlocuteur[sql]f" name="interlocuteur[sql]">

我有一个这样的对象，它来自存储在 sessionStorage 中的 JSON:

contact: {
  actif: true,
  sql: "SELECT * from w "
},
interlocuteur:{
  actif: true,
  sql: "select * from l"
}

如何使用对象中的值填充我的输入？

Answer 1

假设问题的重点是您在运行时不知道对象键的名称，您可以使用两个循环遍历从 JSON 反序列化的对象的键。然后您可以使用检索到的键为元素构建选择器字符串，如下所示:

var data = {
  contact: {
    actif: true,
    sql: "SELECT * from w "
  },
  interlocuteur: {
    actif: true,
    sql: "select * from l"
  }
}

Object.keys(data).forEach(function(outerKey) {
  Object.keys(data[outerKey]).forEach(function(innerKey) {
    var selector = `#${outerKey}\\[${innerKey}\\]`;
    $(selector).val(data[outerKey][innerKey]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="contact[actif]" name="contact[actif]">
<input type="text" id="contact[sql]" name="contact[sql]">
<input type="text" id="interlocuteur[actif]" name="interlocuteur[actif]">
<input type="text" id="interlocuteur[sql]" name="interlocuteur[sql]">

如果您确实知道键名，那么只需访问对象即可检索值。