JavaScript具有从响应生成的角度嵌套对象模型(无限深）

JavaScript with Angular nested object model generating from response (infinite deep)

本文关键字：对象模型 嵌套 无限 响应 JavaScript      更新时间：2023-09-26

我有一个角度应用程序，它正在从服务器获取关于特定对象的响应。这应该为用户生成可以填充并发送回服务器的UI。

响应是一个JSON对象，其中包含数据的"节点"。里面可以有另一个节点。就像树视图。

问题是，对于这样的响应，我能够使用ng模板生成第一层。

这是一个工作代码笔的例子，我正试图得到工作。http://codepen.io/anon/pen/NNMepw

响应结构为：

{   
    "name": "MainNameOfOption",
    "type": "object",
    "properties": {
        "propertyOne": {
        "name": "Option1",
        "type": "object",
          "properties": {
            "ID": {
              "name": "ID",
              "type": "text",
              "properties": {},
              "enum": []
            }
          },
          "enum": null
        },
        "propertyTwo": {
          "name": "Option2",
          "type": "object",
          "properties": {
            "enabled": {
              "name": "Field",
              "type": "boolean",
              "properties": {},
              "enum": []
            },
            "Option": {
              "name": "Option",
              "type": "list",
              "properties": {},
              "enum": ["Option1", "Option2", "Option3", "Option4"]
            },
            "Objective": {
              "name": "Objective",
              "type": "object",
              "properties": {
                "GoNext": {
                  "name": "GoNext",
                  "type": "text",
                  "properties": {},
                  "enum": []
                },
                "GoBack": {
                  "name": "GoBack",
                  "type": "text",
                  "properties": {},
                  "enum": []
                }
              },
              "enum": null
            },
            "Holder": {
              "name": "Holder",
              "type": "object",
              "properties": {
                "Type": {
                  "name": "Type",
                  "type": "list",
                  "properties": { },
                  "enum": ["Option1", "Option2", "Option3", "Option4"]
                }
              },
              "enum": null
            },
          },
          "enum": null
        }
      },
      "enum": null
    };
  }
]);

因此，这应该创建一个UI。UI需要根据它是哪种类型的选项而动态生成。生成视图的HTML是：

<body>
  <div ng-controller="basicDemoCtrl">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="col-sm-12">
          </div>
          <script type="text/ng-template" id="nodes_renderer.html">
            <div>
              <label > {{ node.name }}: </label>
              <input type="checkbox" ng-if="node.type == 'boolean'"
              ng-model="result[parent.name][node.name]" ng-init="result[parent.name][node.name] = result[parent.name][node.name] || 
false"></input>
              <input type="text" ng-if="node.type == 'text' || node.type == 'int'" ng-model="result[parent.name][node.name]" ng-
init="result[parent.name][node.name] = result[parent.name][node.name] || ''" />
              <select ng-if="node.type == 'list'" ng-options="enum as enum for enum in node.enum" ng-model="result[parent.name]
[node.name]" ng-init="result[parent.name][node.name] = result[parent.name][node.name] || ''" > <option value=""> </option> 
</select>
            </div>
            <ol>
              <li ng-repeat="node in node.properties" ng-include="'nodes_renderer.html'">
              </li>
            </ol>
          </script>
          <div class="row">
            <div class="col-sm-6">
              <div id="tree-root">
                <ol ng-model="Object.properties">
                  <li ng-repeat="node in Object.properties" ng-init="parent = node" ng-include="'nodes_renderer.html'"></li>
                </ol>
              </div>
            </div>
            <div class="col-sm-6">
              <pre class="code">{{ result | json }}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

所以现在我可以从创建JSON对象

我期望创建的模型是：

{
"Option1": {
    "ID": ""
    },
"Option2": {
    "Option": "",
    "Field": false,
    "Holder" : { 
         "Type": "Option1", 
     }
    "Objective" : {  
         "GoBack": "",
         "GoNext": ""
     }
  }
}

但遗憾的是，我被这样创建的对象卡住了：

{
  "Option1": {
    "ID": ""
  },
  "Option2": {
    "Option": "",
    "Field": false,
    "Type": "",
    "GoBack": "",
    "GoNext": ""
  }
}

正如您所看到的，我能够制作生成对象的第一层，以便将其正确地拆分为PropertyOne和PropertyTwo，但我不能以某种方式强制在PropertyTwo中生成对象。

我陷入了困境。有人有同样的问题吗？是否成功在嵌套对象内生成动态对象？

我在上面附上了"几乎"工作的代码笔链接。

正如我看到的您的澄清-为什么不创建一个专用服务器来解析JSON并直接创建树模型，而不是作为角度模板渲染的副作用。

相关文章：