从 JSON 数据构建树

Question

I am trying to build a JSON tree structure that nests each item recursively, currently I have this:

 var data = [ { "id":"", "items":[ { "fullName":"images", "name":"images", "type":"folder", "dateCreated":1578270119240, "updatedDate":1583448360597 }, { "fullName":"media", "name":"media", "type":"folder", "dateCreated":1578270119445, "updatedDate":1583383567345 } ] }, { "id":"images", "items":[ { "fullName":"images/123123", "name":"123123", "type":"folder", "dateCreated":1578270119244, "updatedDate":1583384536404 }, { "fullName":"images/banners", "name":"banners", "type":"folder", "dateCreated":1578270119257, "updatedDate":1583384536407 }, { "fullName":"images/doodle", "name":"doodle", "type":"folder", "dateCreated":1578270119441, "updatedDate":1583384536421 } ] }, { "id":"media", "items":[ { "fullName":"media/123123", "name":"123123", "type":"folder", "dateCreated":1578270119244, "updatedDate":1583384536404 }, { "fullName":"media/banners", "name":"banners", "type":"folder", "dateCreated":1578270119257, "updatedDate":1583384536407 }, { "fullName":"media/doodle", "name":"doodle", "type":"folder", "dateCreated":1578270119441, "updatedDate":1583384536421 } ] }, { "id":"media/123123", "items":[ { "fullName":"media/123123/1000", "name":"1000", "type":"folder", "dateCreated":1578270119244, "updatedDate":1583384536404 } ] } ]; console.log( buildHierarchy(data) ); function buildHierarchy(arry) { var roots = [], items = {}; for(var i = 0, len = arry.length ; i < len; i++) { var item = arry[i], p = item.id; target = !p ? roots : (items[p] || (items[p] = [])); target.push({id : item.id, items : item.items }) } var findChildren = function(parent) { for (var j = 0, len = parent.items.length; j < len; j++) { if(items[parent.items[j].fullName]) { parent.items[j].items = items[parent.items[j].fullName]; //console.log(parent.items[j].items); findChildren(parent.items[j]); } } } for (var i = 0, len = roots.length; i < len; i++) { findChildren(roots[i]) } return roots; }

It nests most of the data but it seems to miss one of the nodes I wish to create, I cant figure out what I should be calling recursively so that all nodes are created. I wish to display the data like so:

[
   {
      "id":"",
      "items":[
         {
            "id":"images",
            "fullName":"images",
            "name":"images",
            "type":"folder",
            "dateCreated":1578270119240,
            "updatedDate":1583448360597,
            "items":[
               {
                  "id":"images/123123",
                  "fullName":"images/123123",
                  "name":"123123",
                  "type":"folder",
                  "dateCreated":1578270119244,
                  "updatedDate":1583384536404,
                  "items":[

                  ]
               },
               {
                  "id":"images/banners",
                  "fullName":"images/banners",
                  "name":"banners",
                  "type":"folder",
                  "dateCreated":1578270119257,
                  "updatedDate":1583384536407,
                  "items":[

                  ]
               },
               {
                  "id":"images/doodle",
                  "fullName":"images/doodle",
                  "name":"doodle",
                  "type":"folder",
                  "dateCreated":1578270119441,
                  "updatedDate":1583384536421,
                  "items":[

                  ]
               }
            ]
         },
         {
            "id":"media",
            "fullName":"media",
            "name":"media",
            "type":"folder",
            "dateCreated":1578270119445,
            "updatedDate":1583383567345,
            "items":[
               {
                  "fullName":"media/123123",
                  "name":"123123",
                  "type":"folder",
                  "dateCreated":1578270119244,
                  "updatedDate":1583384536404,
                  "items":[
                     {
                        "id":"media/123123",
                        "items":[
                           {
                              "fullName":"media/123123/1000",
                              "name":"1000",
                              "type":"folder",
                              "dateCreated":1578270119244,
                              "updatedDate":1583384536404
                           }
                        ]
                     }
                  ]
               }
            ]
         }
      ]

Answer 1

The simplest approach would be to create a recursive function, starting with "id": "" . You can then flesh out each item node with the full metadata found in the data array. If the function is recursive and has the appropriate stopping checks, then you should be able to follow the tree arbitrarily deep.

The only downside is that if you have a "id": "foo" with no corresponding "name": "foo" in the root node, then it will be left out of your tree. I'm going to assume that this isn't possible, but it's something to be aware of.

function findNode(id){
  return data.find(e => e.id === id);
}

function buildHierarchy(node) {
  if (!node) return;
  const items = node.items || [];
  for (item of items) {
    // Append the information in the item with the
    // corresponding node in the data array, including
    // the item's items array. This is the recursive
    // part. We keep walking down the tree until we
    // can't find an item's "full info node" in the
    // data array.
    const fullInfoNode = findNode(item.fullName);
    Object.assign(item, buildHierarchy(fullInfoNode));
  }
  return node;
}

buildHierarchy(findNode(""))

 function findNode(id){ return data.find(e => e.id === id); } function buildHierarchy(node) { if (!node) return; const items = node.items || []; for (item of items) { const fullInfoNode = findNode(item.fullName); Object.assign(item, buildHierarchy(fullInfoNode)); } return node; } var data = [ { "id":"", "items":[ { "fullName":"images", "name":"images", "type":"folder", "dateCreated":1578270119240, "updatedDate":1583448360597 }, { "fullName":"media", "name":"media", "type":"folder", "dateCreated":1578270119445, "updatedDate":1583383567345 } ] }, { "id":"images", "items":[ { "fullName":"images/123123", "name":"123123", "type":"folder", "dateCreated":1578270119244, "updatedDate":1583384536404 }, { "fullName":"images/banners", "name":"banners", "type":"folder", "dateCreated":1578270119257, "updatedDate":1583384536407 }, { "fullName":"images/doodle", "name":"doodle", "type":"folder", "dateCreated":1578270119441, "updatedDate":1583384536421 } ] }, { "id":"media", "items":[ { "fullName":"media/123123", "name":"123123", "type":"folder", "dateCreated":1578270119244, "updatedDate":1583384536404 }, { "fullName":"media/banners", "name":"banners", "type":"folder", "dateCreated":1578270119257, "updatedDate":1583384536407 }, { "fullName":"media/doodle", "name":"doodle", "type":"folder", "dateCreated":1578270119441, "updatedDate":1583384536421 } ] }, { "id":"media/123123", "items":[ { "fullName":"media/123123/1000", "name":"1000", "type":"folder", "dateCreated":1578270119244, "updatedDate":1583384536404 } ] } ]; console.log( buildHierarchy(findNode("")) );

Note that, with this approach, you can choose any starting node you want. For example, buildHierarchy(findNode("media")) will return just the media hierarchy:

{
  "id": "media",
  "items": [
    {
      "fullName": "media/123123",
      "name": "123123",
      "type": "folder",
      "dateCreated": 1578270119244,
      "updatedDate": 1583384536404,
      "id": "media/123123",
      "items": [
        {
          "fullName": "media/123123/1000",
          "name": "1000",
          "type": "folder",
          "dateCreated": 1578270119244,
          "updatedDate": 1583384536404
        }
      ]
    },
    {
      "fullName": "media/banners",
      "name": "banners",
      "type": "folder",
      "dateCreated": 1578270119257,
      "updatedDate": 1583384536407
    },
    {
      "fullName": "media/doodle",
      "name": "doodle",
      "type": "folder",
      "dateCreated": 1578270119441,
      "updatedDate": 1583384536421
    }
  ]
}