更新动态嵌套对象的结构

时间:2017-11-16 03:42:00

标签: javascript reactjs object recursion

我有一个动态深度的嵌套对象。我需要略微改变它的结构。

例如,我有一个像这样的对象:

let root = {
    data:{
      id:"5df6608a-59f0-42ac-9c2e-fb2a53df9008",
      name:"Product"
    },
    children:[
      {
         data:{
           id:"b527b1f5-4fd5-4f11-b4f1-6deeb33473d8",
           name:"productId"
         },
         children:[
           {
             data:{
               id:"7045051e-b97e-4836-9048-e93d72c75751",
               name:"rating"
             },
             children:[
               {
                  data:{
                    id:"88025b92-4309-4864-9c40-d4effd33a38b",
                    name:"ratingId"
                  },
                  children:[

                  ]
               }
             ]
           }
         ]
      }
    ]
  }

根对象包含一个名为data的对象和一个子数组,这些子数组又与根对象具有相同的结构,我需要删除数据对象并将数据对象内的id和name值移动到相同的对象中作为子数组的级别如下所示。

let root = {
   id:"5df6608a-59f0-42ac-9c2e-fb2a53df9008",
   name:"Product",
   children:[
      {
         id:"b527b1f5-4fd5-4f11-b4f1-6deeb33473d8",
         name:"productId",
         children:[
           {
            id:"7045051e-b97e-4836-9048-e93d72c75751",
            name:"rating",
            children:[
               {
                  id:"88025b92-4309-4864-9c40-d4effd33a38b",
                  name:"ratingId",
                  children:[

                  ]
               }
             ]
           }
         ]
      }
    ]
}

我如何使用javascript进行操作?

因为我已经编写了一个方法,使用该方法可以将对象遍历到两个级别的深度,但对象的深度是动态的。

以下是我在reactjs中编写的代码。

formateTreeChlidren(treeData){
    let rootObject = {
        name: treeData.data.name,
        id: treeData.data.id,
        children: []
    }
    let tempArray= [];
    treeData.children.map( child => {
        let childrenArray = [];
        if(child.children.length > 0){
            child.children.map( subChild => {
                let subChildObject= {
                    name: subChild.data.name,
                    id: subChild.data.id,
                    children:subChild.children
                }
                childrenArray.push(subChildObject);
            });
        }
        let childObject= {
            name: child.data.name,
            id: child.data.id,
            children:childrenArray
        }
        tempArray.push(childObject);
    });
    rootObject["children"] = tempArray;
}

1 个答案:

答案 0 :(得分:0)

为每个节点类型声明一个接口

const OldNode = ( id , name , ...children ) =>
  ( { data : { id , name }
    , children : children
    }
  )

const NewNode = ( id , name , ...children ) =>
  ( { id
    , name
    , children 
    }
  )

然后创建一个函数来转换两个

const old2new = ( { data : { id = 0 , name = '' } , children = [] } )  =>
  NewNode ( id
          , name
          , children .map ( old2new )
          )

一些数据集

const data0 =
  [ OldNode ( 1
            , 'a'
            , OldNode ( 2 , 'b' )
            , OldNode ( 3 , 'c' )
            )
  , OldNode ( 4
            , 'd'
            , OldNode ( 5 , 'e' )
            , OldNode ( 6 , 'f' )
            )
  ]

console.log (data0)
// [ { data: { id : 1
//           , name : 'a'
//           }
//   , children : [ { data : { id : 2
//                           , name : 'b'
//                           }
//                  , children : []
//                  }
//                , { data : { id : 3
//                           , name : 'c'
//                           }
//                   , children : []
//                  }
//                ]
//   }
// , { data : { id : 4
//            , name : 'd'
//            }
//   , children : [ { data : { id : 5
//                           , name : 'e'
//                           }
//                  , children : []
//                  }
//                , { data : { id : 6
//                           , name : 'f'
//                           }
//                  , children : []
//                  }
//                ]
//   }
// ]

使用Array.prototype.map

进行转换
const data1 =
  data0 .map ( old2new )

console.log (data1)
// [ { id : 1
//   , name : 'a'
//   , children : [ { id : 2
//                  , name : 'b'
//                  , children : []
//                  }
//                , { id : 3
//                  , name : 'c'
//                  , children : []
//                  }
//                ]
//   }
// , { id : 4
//   , name : 'd'
//   , children : [ { id : 5
//                  , name : 'e'
//                  , children : []
//                  }
//                , { id : 6
//                  , name : 'f'
//                  , children : []
//                  }
//                ]
//   }
// ]

代码演示



const OldNode = ( id , name , ...children ) =>
  ( { data : { id , name }
    , children : children
    }
  )
  
const NewNode = ( id , name , ...children ) =>
  ( { id
    , name
    , children 
    }
  )
  
const old2new = ( { data : { id = 0 , name = '' } , children = [] } )  =>
  NewNode ( id
          , name
          , children .map ( old2new )
          )
          
const data0 =
  [ OldNode ( 1
            , 'a'
            , OldNode ( 2 , 'b' )
            , OldNode ( 3 , 'c' )
            )
  , OldNode ( 4
            , 'd'
            , OldNode ( 5 , 'e' )
            , OldNode ( 6 , 'f' )
            )
  ]
  
const data1 =
  data0 .map ( old2new )
  
console.log (data1)
// [ { id : 1
//   , name : 'a'
//   , children : [ { id : 2
//                 , name : 'b'
//                 , children : []
//                 }
//               , { id : 3
//                 , name : 'c'
//                 , children : []
//                 }
//               ]
//   }
// , { id : 4
//   , name : 'd'
//   , children : [ { id : 5
//                 , name : 'e'
//                 , children : []
//                 }
//               , { id : 6
//                 , name : 'f'
//                 , children : []
//                 }
//               ]
//   }
// ]