Javascript - 将 ParentId 更新为嵌套对象答案

【问题标题】：Javascript - Updating ParentId to in nested objectsJavascript - 将 ParentId 更新为嵌套对象
【发布时间】：2020-12-30 23:30:48
【问题描述】：

我目前将一个结构存储在一个带有嵌套对象的 javascript 数组中。该结构没有 parentId 参数，我确实需要获取嵌套对象的父级。当前结构输出：

    [{
        "id":1000,
        "pageIndex":0,
        "type":"page",
        "label":"Page 1",
        "rows":[
            {
                "id":1002,
                "type":"row 1",
                "layout":{
                    "gutters":true,
                    "wrapping":false,
                    "guttersDirect":false,
                    "parentId":1002
                },
                "columns":[
                    {
                        "id":1003,
                        "type":"col 1",
                        "layout":{
                            "size":3,
                            "outOf":12,
                            "parentId":1003
                        }
                    },
                    {
                        "id":1004,
                        "type":"col 2",
                        "layout":{
                            "size":3,
                            "outOf":12,
                            "parentId":1004
                        },
                        "elements":[
                            {
                                "id":1006,
                                "type":"text",
                                "label":"Account ID"
                            }
                        ]
                    },
                    {
                        "id":1005,
                        "type":"col 3",
                        "layout":{
                            "size":6,
                            "outOf":12,
                            "parentId":1005
                        }
                    }
                ]
            }
        ]
    }]

我需要一个函数，用父嵌套对象的 id 更新所有嵌套对象的 parentId 属性。

我有以下功能

   _PREV_PARENT_ID = null;
    assignParentIds(object){
        Object.keys(object).forEach(key => {
            console.log(`key: ${key}, value: ${object[key]}`)
            if(key === "id"){
                this._PREV_PARENT_ID = object[key];
            }else if (typeof object[key] === 'object') {
                if(!!this._PREV_PARENT_ID){
                    object[key]['parentId'] = this._PREV_PARENT_ID;
                }
                this.assignParentIds(object[key])
            }
        });
    }

但是，此函数无法为数组中的项目正确设置父 ID

[
    {
        "id":1000,
        "pageIndex":0,
        "type":"page",
        "label":"Page 1",
        "rows":[
            {
                "id":1002,
                "parentId":1000,
                "type":"row 1",
                "layout":{
                    "gutters":true,
                    "wrapping":false,
                    "guttersDirect":false,
                    "parentId":1002
                },
                "columns":[
                    {
                        "id":1003,
                        "parentId":1002, <--- Correct
                        "type":"col 1",
                        "layout":{
                            "size":3,
                            "outOf":12,
                            "parentId":1003
                        }
                    },
                    {
                        "id":1004,
                        "parentId":1003, <--- In-Correct
                        "type":"col 2",
                        "layout":{
                            "size":3,
                            "outOf":12,
                            "parentId":1004
                        },
                        "elements":[
                            {
                                "id":1006,
                                "parentId":1004,
                                "type":"text",
                                "label":"Account ID"
                            }
                        ]
                    },
                    {
                        "id":1005,
                        "parentId":1006, <--- In-Correct
                        "type":"col 3",
                        "layout":{
                            "size":6,
                            "outOf":12,
                            "parentId":1005
                        }
                    }
                ]
            }
        ]
    }
]

我还考虑过可能放弃 parentId 属性，而是使用一个返回嵌套父级的函数，但是它也遇到了同样的问题（如果我在 id = 1004 上调用该函数，它会返回id = 1003 的数组，而不是返回 id 为 1002 的对象。

_PARENT_OBJECT = null;
    findParentByChildId(o, id) {
        if( o.id === id ){
            return o;
        }else{
            if(o.hasOwnProperty('id')){
                this._PARENT_OBJECT = o;
            }
        }
        var result, p; 
        for (p in o) {          
            if( o.hasOwnProperty(p) && typeof o[p] === 'object' ) {             
                result = this.findParentByChildId(o[p], id);
                if(result){                 
                    return this._PARENT_OBJECT;
                }
            }
        }
        return result;  
        
    }

由于用例是关于使用拖放功能，因此 parentId 经常会更新，并且似乎是我们需要跟踪的不必要的额外属性，如果我有办法调用函数 findParentByChildId 会是最好的()。

管理此问题的最佳方法是什么？

【问题讨论】：

标签： javascript nested-object

【解决方案1】：

我想借此机会弄清楚。我制作了一个walker 函数，它遍历每个级别和数组，并带来上一个级别的ID。然后，当它在 id 上获得匹配时，它会返回您正在寻找的父 id。或者当它没有匹配时，它返回null。

const data = [{
  "id": 1000,
  "pageIndex": 0,
  "type": "page",
  "label": "Page 1",
  "rows": [{
    "id": 1002,
    "type": "row 1",
    "layout": {
      "gutters": true,
      "wrapping": false,
      "guttersDirect": false,
      "parentId": 1002
    },
    "columns": [{
        "id": 1003,
        "type": "col 1",
        "layout": {
          "size": 3,
          "outOf": 12,
          "parentId": 1003
        }
      },
      {
        "id": 1004,
        "type": "col 2",
        "layout": {
          "size": 3,
          "outOf": 12,
          "parentId": 1004
        },
        "elements": [{
          "id": 1006,
          "type": "text",
          "label": "Account ID"
        }]
      },
      {
        "id": 1005,
        "type": "col 3",
        "layout": {
          "size": 6,
          "outOf": 12,
          "parentId": 1005
        }
      }
    ]
  }]
}];

const walkTree = (entry, matchId, parentId = null) => {
  let result = null;
  for (const { id, ...rest } of entry) {
    if (matchId === id) {
      return parentId;
    }
    parentId = id;
    for (const value of Object.values(rest)) {
      if (Array.isArray(value)) {
        result = walkTree(value, matchId, parentId);
        break;
      }
    }
  }
  return result;
};

const findParentByChildId = id => walkTree(data, id);

// ID's to look up parents of.
const lookupParents = [
  1000,
  1002,
  1003,
  1004,
  1005,
  1006,
  1007
];

// Log results.
for (const id of lookupParents) {
  console.log(`Parent of ${id}:`, findParentByChildId(id));
}

【讨论】：