Javascript 并排迭代两个对象

我有一个模式和一个数据对象。使用模式我需要创建一个表单，使用数据对象我需要填充它。最好的办法是什么

例如：

var schema = {
    object: {
        someData: {
           type: "String",
           required: "true"
        },
        name: {
          type: "String",
          required: "false"
       }
   }
}

var data = {
   object: {
       someData: "foo",
       name: "John"
   }
}

从这里我需要生成这样的东西

<form>
<fieldset><legend>object</legend>
<input type="text" name="someData" value="foo">
<input type="text" name="name" value="John">
</fieldset>
</form>

对象

我已经想到了一些方法来实现这一点，但我认为我把它复杂化了。一定有更简单的方法吧

有两个陷阱：模式不是固定的，它可以更改。另一个原因是某些数据类型本身就是对象

---

编辑：我把这个问题简化了。这是最简单的情况，但在我的特殊情况下，我有更复杂的数据对象和模式，它们会发生变化，而且一旦用户编辑了某些内容，我还需要从表单中重新创建数据对象。我编辑数据时考虑到了这一点。

在我看来，您可以做的最简单的事情是循环数据对象的键，然后立即从模式中获取每种类型。您还可以添加一个对象，其中包含为每种类型创建输入的方法，以避免出现巨大的switch语句

var controlFactory = {
  'String': function (name, value) {
     return '<input type="text" name="'+name+'" value="'+value+'">';
   }
}

var info, value;
for (var name in data) {
  value = data[name];
  info = schema[name];

  if (info && controlFactory[info.type]) {
     // create form field from factory
  }
}

var控制工厂={
“字符串”：函数（名称、值）{
返回“”；
}
}
var信息，价值；
for（数据中的变量名称）{
值=数据[名称]；
info=模式[名称]；
if（信息和控制工厂[信息类型]）{
//从工厂创建表单字段
}
}

在我看来，最简单的方法就是在数据对象的键上循环，然后立即从模式中获取每种类型。您还可以添加一个对象，其中包含为每种类型创建输入的方法，以避免出现巨大的switch语句

var controlFactory = {
  'String': function (name, value) {
     return '<input type="text" name="'+name+'" value="'+value+'">';
   }
}

var info, value;
for (var name in data) {
  value = data[name];
  info = schema[name];

  if (info && controlFactory[info.type]) {
     // create form field from factory
  }
}

var控制工厂={
“字符串”：函数（名称、值）{
返回“”；
}
}
var信息，价值；
for（数据中的变量名称）{
值=数据[名称]；
info=模式[名称]；
if（信息和控制工厂[信息类型]）{
//从工厂创建表单字段
}
}

创建一个接受架构和数据的函数，然后在该函数中创建表单。这是一个基本的例子。在生产中，您可以在函数中使用switch语句来表示不同的数据类型

小提琴：

---

创建一个接受模式和数据的函数，然后在该函数中创建表单。这是一个基本的例子。在生产中，您可以在函数中使用switch语句来表示不同的数据类型

小提琴：

---

如果您使用的是JQuery，可以尝试以下方法：

for(var key in schema){
    if(schema.hasOwnProperty(key)){
        var $field = $('<input>').attr({
            type : 'text',
            name : key,
            value : data[key]
        });
        $body.append($field);
    }
}

for（架构中的var键）{
if（schema.hasOwnProperty（键））{
变量$field=$（''）.attr({
键入：“文本”，
姓名:key,，
值：数据[键]
});
$body.append（$field）；
}
}

---

下面是JSFIDLE:

如果您使用的是JQuery，您可以尝试以下方法：

for(var key in schema){
    if(schema.hasOwnProperty(key)){
        var $field = $('<input>').attr({
            type : 'text',
            name : key,
            value : data[key]
        });
        $body.append($field);
    }
}

for（架构中的var键）{
if（schema.hasOwnProperty（键））{
变量$field=$（''）.attr({
键入：“文本”，
姓名:key,，
值：数据[键]
});
$body.append（$field）；
}
}

这是JSFiddle:

小菜一碟

// Define the variables, like you want
var schema = {
  someData: {
    type: "String",
    required: "true"
  },
  name: {
    type: "String",
    required: "false"
  }
};

var data = {
  someData: "foo",
  name: "John"
};

//n for name
for (var n in data) {
  //good practice to check
  if (data.hasOwnProperty(n) && schema.hasOwnProperty(n)) {
    var t = schema[n].type; //t for type
    var v = data[n];  //v for value
    console.log('<input type="' + t + '" name="' + n + '" value="' + v + '">');
  }
}

//根据需要定义变量
变量模式={
一些数据：{
键入：“字符串”，
必填项：“true”
},
姓名：{
键入：“字符串”，
必填项：“false”
}
};
风险值数据={
一些数据：“foo”，
姓名：“约翰”
};
//n代表名字
for（数据中的变量n）{
//检查的良好实践
if（data.hasOwnProperty（n）和&schema.hasOwnProperty（n））{
var t=schema[n].type；//t表示类型
var v=数据[n]；//v表示值
控制台日志（“”）；
}
}

希望有帮助：）

小菜一碟

// Define the variables, like you want
var schema = {
  someData: {
    type: "String",
    required: "true"
  },
  name: {
    type: "String",
    required: "false"
  }
};

var data = {
  someData: "foo",
  name: "John"
};

//n for name
for (var n in data) {
  //good practice to check
  if (data.hasOwnProperty(n) && schema.hasOwnProperty(n)) {
    var t = schema[n].type; //t for type
    var v = data[n];  //v for value
    console.log('<input type="' + t + '" name="' + n + '" value="' + v + '">');
  }
}

//根据需要定义变量
变量模式={
一些数据：{
键入：“字符串”，
必填项：“true”
},
姓名：{
键入：“字符串”，
必填项：“false”
}
};
风险值数据={
一些数据：“foo”，
姓名：“约翰”
};
//n代表名字
for（数据中的变量n）{
//检查的良好实践
if（data.hasOwnProperty（n）和&schema.hasOwnProperty（n））{
var t=schema[n].type；//t表示类型
var v=数据[n]；//v表示值
控制台日志（“”）；
}
}

---

希望有帮助：）

使用ECMA5方法，您可以执行类似的操作

HTML

---

在

上，使用ECMA5方法可以执行类似的操作

HTML

---

在

上，您将拥有哪些类型，以及它们的输出HTML将如何显示？我正在寻找更一般的答案，我不想让您为我工作；）。假设类型始终是文本，html是我发布的。如果每个对象中的键相同，在一个对象中循环键并引用这两个键应该非常简单。@KevinB你是对的，我认为这里真正的问题是如何在模式和数据中包含另一个对象中的对象，然后在用户更改某些内容后检索该信息以重新创建数据对象我认为您应该将表单元素“id”作为数据集的一部分附加，这样“name”就不需要唯一。因此，您可以使用相同的“名称”创建复选框和单选元素，并能够按ID检索元素。您将使用什么类型，以及输出HTML如何查找它们中的每一个？我正在寻找更一般的答案，我不想让您为我工作；）。假设类型始终是文本，html是我发布的。如果每个对象中的键相同，在一个对象中循环键并引用这两个键应该非常简单。@KevinB你是对的，我认为这里真正的问题是如何在模式和数据中包含另一个对象中的对象，然后在用户更改某些内容后检索该信息以重新创建数据对象我认为您应该将表单元素“id”作为数据集的一部分附加，这样“name”就不需要唯一。因此，您可以使用相同的“名称”创建复选框和单选元素，并能够通过ID检索元素。。。在中，不检查属性是否属于