I have an array like below in which there are two types of data, file or folder. I only want to filter file type data.

let data = [
    {
      "id": 3,
      "type": "file",
      "url": "www.first"
    }, {
      "id": 4,
      "type": "file",
      "url": "www.second"
    }, {
      "id": 5,
      "type": "folder",
      "items": [
          {
            "id": 6,
            "type": "file",
            "url": "www.third"
          }
       ]
    }
];

Desired result is

[
    {
        "id": 3,
        "type": "file",
        "url": "www.first"
    }, {
        "id": 4,
        "type": "file",
        "url": "www.second"
    }, {
        "id": 6,
        "type": "file",
        "url": "www.third"
    }
]

NOTE: There can be multiple levels like inside folder items, there can be another folder

Any help would be appreciated. Thanks!

I have an array like below in which there are two types of data, file or folder. I only want to filter file type data.

let data = [
    {
      "id": 3,
      "type": "file",
      "url": "www.first."
    }, {
      "id": 4,
      "type": "file",
      "url": "www.second."
    }, {
      "id": 5,
      "type": "folder",
      "items": [
          {
            "id": 6,
            "type": "file",
            "url": "www.third."
          }
       ]
    }
];

Desired result is

[
    {
        "id": 3,
        "type": "file",
        "url": "www.first."
    }, {
        "id": 4,
        "type": "file",
        "url": "www.second."
    }, {
        "id": 6,
        "type": "file",
        "url": "www.third."
    }
]

NOTE: There can be multiple levels like inside folder items, there can be another folder

Any help would be appreciated. Thanks!

• javascript

Share Improve this question Follow edited Jun 16, 2020 at 9:12 Yevhen Horbunkov 15.6k33 gold badges2727 silver badges4545 bronze badges asked Jun 16, 2020 at 8:32 Sagar JajoriyaSagar Jajoriya 2,37511 gold badge1212 silver badges1717 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Assuming your folder structure may span few levels deep, you may need to traverse your input array recursively to flatten the tree structure, Array.prototype.flatMap() may e in handy for that:

const src = [
    {
      "id": 3,
      "type": "file",
      "url": "www.first."
    }, {
      "id": 4,
      "type": "file",
      "url": "www.second."
    }, {
      "id": 5,
      "type": "folder",
      "items": [
          {
            "id": 6,
            "type": "folder",
            "items" : [
              {
                "id" : 7,
                "type" : "file",
                "ulr" : "www.third."
              }
            ]
          }
       ]
    }
],

    flattenArr = arr => 
      arr.flatMap(({items=[], ...rest}) => 
        rest.type == 'folder' ? flattenArr(items) : rest)
      
      
console.log(flattenArr(src))

.as-console-wrapper {min-height:100%;}

Recursive function that will traverse items if it exists. Returns all files and flattens the arrays using flatMap. Ignores all other types.

let data = [
    {
      "id": 3,
      "type": "file",
      "url": "www.first."
    }, {
      "id": 4,
      "type": "file",
      "url": "www.second."
    }, {
      "id": 5,
      "type": "folder",
      "items": [
          {
            "id": 6,
            "type": "file",
            "url": "www.third."
          }
       ]
    }
];
walk = node =>
  node.type === 'file' ? node : (node.items||[]).flatMap(walk)

console.log(data.flatMap(walk))

you can use .flatMap() along with .filter() function to do this.

P.S. This solution will work only 1 level deep, i.e. if you have file type objects inside a folder. See the edited part of the answer for the solution that will filter file type objects from nested folders inside folders.

let data = [
    { "id": 3, "type": "file", "url": "www.first." }, 
    { "id": 4, "type": "file", "url": "www.second." },
    {
      "id": 5,
      "type": "folder",
      "items": [
          { "id": 6, "type": "file", "url": "www.third." }
       ]
    }
];

const output = data.flatMap(a => {
  return a.type === 'file' 
          ? a
          : a.items.filter(item => item.type === 'file');  
});

console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }

EDIT:

Here's a recursive solution that will filter objects of type files from nested folders

let data = [
    { "id": 3, "type": "file", "url": "www.first." }, 
    { "id": 4, "type": "file", "url": "www.second." },
    {
      "id": 5,
      "type": "folder",
      "items": [
          { "id": 6, "type": "file", "url": "www.third." },
          {
            "id": 7,
            "type": "folder",
            "items": [
               { "id": 8, "type": "file", "url": "www.fourth." },
               {
                 "id": 9,
                 "type": "folder",
                 "items": [
                   { "id": 10, "type": "file", "url": "www.fifth." }
                 ]
              }
            ]
          }
       ]
    }
];

function filterFiles(arr) {
  return arr.flatMap(item => item.type === 'file' ? item : filterFiles(item.items));
}

console.log(filterFiles(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Use basic implementation of going through nested arrays.

Accumulate objects into the list if the object with type file is found.

let data = [{
  "id": 3,
  "type": "file",
  "url": "www.first."
}, {
  "id": 4,
  "type": "file",
  "url": "www.second."
}, {
  "id": 5,
  "type": "folder",
  "items": [{
    "id": 6,
    "type": "file",
    "url": "www.third."
  }]
}];


function recursive(arr) {
  const list = []
  for (let i = 0; i < data.length; i++) {
    if (arr[i] && arr[i].items && Array.isArray(arr[i].items)) {
      return [...list, ...recursive(arr[i].items)];
    }
    if (arr[i] && arr[i].type === 'file') {
      list.push(arr[i]);
    }
  }
  return list;

}

console.log(recursive(data))

data.filter(each => each.type === "file");

That will give you what you want