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

如果您确实知道键名，那只是访问对象以检索值的一种情况。

Answer 2

使用JavaScript：

document.getElementById("contact[actif]").value = contact.actif;
document.getElementById("contact[sql]").value = contact.sql;

document.getElementById("interlocuteur[actif]").value = interlocuteur.actif;
document.getElementById("interlocuteur[sql]").value = interlocuteur.sql;

使用对象中的值用嵌套名称填充Input

2 个答案: