将JSON模式转换为Angular树控件的树模型

Question

我可以帮助您翻译。这篇文章涉及编程相关内容。需要将一个非常大的json schema转换成Angular Tree Control支持的treemodel格式，但是该json schema不完全符合Angular Tree Control支持的treemodel格式。例如，模式中的子级（属性）不在数组中。如何将json schema转换为treemodel格式？

该模式看起来像这样（除了更复杂，具有多达10个嵌套级别）：

{
    "type": "object",
    "properties": {
        "firstName": {
            "type": "string"
        },
        "lastName": {
            "type": "string"
        },
        "address": {
            "type": "object",
             "properties": {
                 "addressLine1": {
                      "type": "string"
                  },
                  "addressLine2": {
                       "type": "string"
                  }
             }
         }
     }
 }

为了在 Angular 树控件中正确渲染，它需要像这样：

{
        "type": "object",
        "properties": [
            {
                "name": "firstName",
                "type": "string"
            },
            {
                "name": "lastName",
                "type": "string"
            },
            {
                "name": "address",
                "type": "object",
                "properties": [
                      {
                          "name": "addressLine1",
                          "type": "string"
                      },
                      {
                           "name": "addressLine2",
                           "type": "string"
                      }
                ]
            }
        ]
    }

- user3920421

---

你能分享一下你当前的模式(schema)的例子吗？ - Giovanni Benussi

编辑了带有模式示例的内容。 - user3920421

Answer 1

这是一个例子，可以重构为递归到更深层次。

var data = {
    "type": "object",
    "properties": {
        "firstName": {
            "type": "string"
        },
        "lastName": {
            "type": "string"
        },
        "address": {
            "type": "object",
             "properties": {
                 "addressLine1": {
                      "type": "string"
                  },
                  "addressLine2": {
                       "type": "string"
                  }
             }
         }
     }
};

function toTreeModel(obj){
 var treeModel = {};

 for (var a in obj) {
  if(a === 'properties'){
   treeModel[a] = []
   var i = 0;
   var e = 0;
   for(b in obj[a]){
    if(obj[a][b].type === 'object'){
     treeModel[a][i] = {name: b, type: obj[a][b].type, properties: []};
     for(c in obj[a][b].properties){
      treeModel[a][i].properties.push({name: c, type: obj[a][b].properties[c].type});
      e++;
     }
    } else {
     treeModel[a][i] = {name: b, type: obj[a][b].type};
    }
    i++;
   }
  } else {
   treeModel[a] = obj[a];
  }
 }
 return treeModel;
}

var toTree = toTreeModel(data);
// console.log(toTree);
document.getElementById("output").innerHTML = JSON.stringify(toTree, undefined, 2);

<pre id="output">
</pre>

- aUXcoder

Answer 2

它也支持嵌套

var data = {
      "type": "object",
      "properties": {
        "checked": {
          "type": "boolean",
        },
        "dimensions": {
          "type": "object",
          "properties": {
            "width": {
              "type": "integer",
            },
            "height": {
              "type": "integer",
            },
            "volume": {
              "type": "object",
              "properties": {
                "length": {
                  "type":"integer",
                },
                "breadth":{
                  "type": "integer"
                }
              }
            }
          }
        },
        "id": {
          "type": "integer",
        },
        "name": {
          "type": "string",
        },
        "price": {
          "type": "number",
        }
      }
    }


function findProperties(obj){
  let properties = []
  for(key in obj){
    if(obj[key].properties){
      properties.push({name: key, datatype: obj[key].type, properties: findProperties(obj[key].properties)})
    }else{
      properties.push({ name: key, datatype: obj[key].type});
    }
  }
  return properties;
}

function findData(data){
  let result = "";
  for(key in data){
    if(key == 'properties'){
      result = findProperties(data.properties)
    }
  }
  return result;
}

console.log(JSON.stringify(findData(data)));

- vijay kumar