Angular - Count number of files in a list based on extension-CodePudding

I have a data list as below :

  List:
  [0]: file_name : a.jpg, category : social;
  [1]: file_name : b.png, category : digital;
  [2]: file_name : c.tif, category : social;
  [3]: file_name : a.jpg, category : digital;

I need to create an array which will have extension and its count.

Below is the expected output :

  fileListCount = [
      {name: 'jpg', completed: false, count: '5'},
      {name: 'pdf', completed: false, count: '4'},
      {name: 'tif', completed: false, count: '3'},
      {name: 'mp4', completed: false, count: '2'},
      {name: 'docx', completed: false, count: '1'},
      {name: 'doc', completed: false, count: '10'}
  ];

The problem is i am unable to find a dynamic solution for counting the extensions in the list. I am hardcoding and that can cause an issue. Any help or leads much appreciated :

  obj : {
    name: string;
    checked: false;
    count: number;
  }
myList = [];

    let count=0;
    let pngArr:string[]
    let jpgArr:string[]
    let tifArr:string[]
    for (let entry of this.masterList) {
      debugger;
      let ext:string = entry.file_name.split('.').pop();
      if(ext == 'png') {
        pngArr.push(ext);
      }
      if(ext== "jpeg") {
        jpgArr.push(ext);
      }
      if(ext== "tif") {
        tifArr.push(ext);
      }
  }

  this.obj.name = "jpg";
  this.obj.count = jpgArr.length;

  this.myList.push(this.obj);

CodePudding user response：

To count the number of files with a specific extension, you can use a JavaScript object to store the count of each extension.

First, create an empty extensions object. Then, iterate over each file in your list and use the split method to get the extension of the file. If the extension is not already a property of the extensions object, you can add it and set its value to 1. Otherwise, you can increment the count of the extension by 1.

After iterating over the entire list, you can use the Object.entries method to get the key-value pairs of the extensions object, then use Array.map to create an array of objects with the structure you described in your expected output:

const fileList = [
  { file_name: 'a.jpg', category: 'social' },
  { file_name: 'b.png', category: 'digital' },
  { file_name: 'c.tif', category: 'social' },
  { file_name: 'a.jpg', category: 'digital' },
];

// Create an empty object to store the counts
const extensions = {};

// Iterate over each file in the list
for (const file of fileList) {
  // Use the split method to get the file extension
  const ext = file.file_name.split('.').pop();

  // If the extension is not already a property of the object, add it and set its value to 1
  if (!extensions[ext]) {
    extensions[ext] = 1;
  } else {
    // Otherwise, increment the count of the extension by 1
    extensions[ext]  ;
  }
}

// Use Object.entries to get the key-value pairs of the object
const extensionCounts = Object.entries(extensions);

// Use Array.map to create an array of objects with the structure you described
const fileListCount = extensionCounts.map(([name, count]) => ({
  name,
  completed: false,
  count,
}));

console.log(fileListCount);

// Output: [
//   { name: 'jpg', completed: false, count: 2 },
//   { name: 'png', completed: false, count: 1 },
//   { name: 'tif', completed: false, count: 1 },
// ]