Javascript - Restructure an array of strings based on prefix

Question

I have an array containing a list of filenames:

var files = ['home_01.ai','home_02.ai','home_03.ai','imprint_01.ai','imprint_02.ai']

What I want to do is reorganise this array into a multi-dimensional array that groups together each file with the same prefix. In this case:

var firstArray = ['home_01.ai','home_02.ai','home_03.ai'], /*home*/
    secondArray = ['imprint_01.ai','imprint_02.ai']; /*imprint*/

How could I achieve that when there can be a variable amount of prefixes that can be any length in my file array?

adiga · Accepted Answer · 2022-03-26 09:32:17Z

1

You can loop over the array and split the filename on '_' to get the prifix, then it is a case of adding those filenames into the right array, indexed by prefix.

var files = ['home_01.ai', 'home_02.ai', 'home_03.ai', 'imprint_01.ai', 'imprint_02.ai'];
var result = {};

for (var i = 0; i < files.length; i++) {
  if (files[i].indexOf('_') < 0) 
  {
    console.log("No prefix detected in '" + files[i] + "'.");
    continue;
  }
  var prefix = files[i].split('_')[0];
  if (!result[prefix])
    result[prefix] = [];
  result[prefix].push(files[i]);
}

console.log(result);

edited Mar 26, 2022 at 9:32

adiga

35.4k9 gold badges66 silver badges88 bronze badges

answered Jan 20, 2016 at 9:37

Matt

1,4072 gold badges14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marten Zander Over a year ago

thanks four your reply. That's exactly what I wanted to know. But I don't get the last part in the lopp " if (!result[prefix])... " ..why don't you open the if() with the brackets {} ? .. sorry for being nooby..

Matt Over a year ago

If the code that would be inside a block such as an if, for, while only has one line, you can skip the brackets. Note that you can't do this for functions, or object declarations, or try-catch statements.

agershun · Accepted Answer · 2016-01-20 09:47:00Z

0

You can do it with AlaSQL JavaScript data processing library.

Here is the solution for your problem:

var res = alasql('COLUMN OF SELECT ARRAY(_) FROM ? \
     GROUP BY _->split("_")->0',[files]);

This statement returns array of arrays grouped by prefix:

[ [ 'home_01.ai', 'home_02.ai', 'home_03.ai' ],
  [ 'imprint_01.ai', 'imprint_02.ai' ] ]

Here:

COLUMN OF - return only first column of query
SELECT ... FROM ? GROUP BY ... - select statement
ARRAY(_) - group records in array
FROM ? - query from parameter [files]
GROUP BY ->split("")->0 - take a value, split it with '' and then take first element of array (similar to JS r.split('')[0]

Disclaimer: I am an author of AlaSQL.

answered Jan 20, 2016 at 9:47

agershun

4,10742 silver badges42 bronze badges

3 Comments

Maxali Over a year ago

AlaSQL is good library but he don't have to use a full library for just this problem.

agershun Over a year ago

1 line source code vs more than 10. That is why we do need libraries :)

Maxali Over a year ago

Right. I would have used the library, but not in Web projects where bandwidth is important. For Nodejs, yes. I already cloned for it :) @agershun

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

UPDATE

I missed that you may have another prefixes. Updated for using with any prefix.

function splitFilesIntoTypes(_files, cb) {
  var result = [];
  // loop through the array
  _files.map(function(a, b){
      if(!result[a.split('_')[0]])
        result[a.split('_')[0]] = [];
    
      result[a.split('_')[0]].push(a);
  });
  return result
}

var files = ['another_01.ai','home_01.ai','home_02.ai','home_03.ai','imprint_01.ai','imprint_02.ai'];
console.log(splitFilesIntoTypes(files));

FIXED

Supposing you have only two types of names (home_... and imprint_...). I made this function to split it into two arrays.

// function takes array and returns two array to callback function
function splitFilesIntoTypes(_files, cb) {
  // if you have only two types of names
  var _home = [], _imprint = [];

  // loop through the array
  _files.map(function(a, b){
      
      if(a.split('_')[0] === 'home') _home.push(a);
      if(a.split('_')[0] === 'imprint') _imprint.push(a);
  });
  
  if(typeof cb === "function")
    cb(_home, _imprint);
  

}

var files = ['home_01.ai','home_02.ai','home_03.ai','imprint_01.ai','imprint_02.ai'];

splitFilesIntoTypes(files, function(firstArray, secondArray) {

  console.log(firstArray);
  console.log(secondArray);
  
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 20, 2016 at 9:34

Maxali

1,9922 gold badges16 silver badges25 bronze badges

2 Comments

Matt Over a year ago

The question specifies that there can be any number of different prefixes in the files array.

ProgrammerGuy Over a year ago

Your answer is hard coded to two prefixes. The code has to change if the data changes.

Lewis · Accepted Answer · 2016-01-20 10:21:56Z

0

var files = ['home_01.ai', 'home_02.ai', 'home_03.ai', 'imprint_01.ai', 'imprint_02.ai'];
var result = files.reduce(function(prev, curr) {
  var index = curr.indexOf('_01.');
  if (index !== -1) {
    prev.push(index);
  }
  return prev;
}, []).map(function(index) {
  return files.splice(0, index - 1);
});


document.body.textContent = JSON.stringify(result);

Please note that this answer assumes that files are already alphabetically sorted.

answered Jan 20, 2016 at 10:21

Lewis

15k14 gold badges70 silver badges88 bronze badges

Comments

ProgrammerGuy · Accepted Answer · 2016-01-20 17:19:00Z

I'm using the same approach as Maxali, but using a javascript library called lodash. It's useful for filtering arrays and objects without need to write your own filtering code.

Instead of saving to a 2 dimensional array, I create a JSON object with arrays as the value as I find it useful to have keys I can read and understand in my javascript. Have a look at lodash, it may be overkill for what you need today but could be useful for tomorrow.

https://lodash.com/

<!DOCTYPE html>
<html>

<head>
  <script src="https://raw.github.com/lodash/lodash/4.0.0/dist/lodash.js"></script>
  <!-- downloaded from https://lodash.com -->
  <script>
    var files = ['home_01.ai', 'home_02.ai', 'home_03.ai', 'imprint_01.ai', 'imprint_02.ai'];

    var getPrefixFn = function(file) {
      return file.substr(0, file.indexOf('_'));
    };
    var prefixes = _.map(files, getPrefixFn);
    var uniquePrefixes = _.uniq(prefixes);
    var groupedFiles = {};

    _(files).forEach(function(file) {
      _(uniquePrefixes).forEach(function(prefix) {
        if (groupedFiles[prefix] == null) groupedFiles[prefix] = []; // create a new group if it doesnt exist
        if (file.indexOf(prefix) === 0) {
          groupedFiles[prefix].push(file);
        }
      });
    });

    console.log(groupedFiles);
  </script>

</head>

<body>
</body>

</html>

If a 2 dimensional array is easier to process then try this:

<!DOCTYPE html>
<html>

<head>
  <script src="https://raw.github.com/lodash/lodash/4.0.0/dist/lodash.min.js"></script>
  <!-- downloaded from https://lodash.com -->
  <script>
    var files = ['home_01.ai', 'home_02.ai', 'home_03.ai', 'imprint_01.ai', 'imprint_02.ai'];

    var getPrefixFn = function(file) {
      return file.substr(0, file.indexOf('_'));
    };
    var prefixes = _.map(files, getPrefixFn);
    var uniquePrefixes = _.uniq(prefixes);
    var groupedFiles = [];

    for (var index = 0, length = uniquePrefixes.length; index < length; index += 1) {
      var prefix = uniquePrefixes[index];
      groupedFiles[index] = [];
      for (var fileIndex = 0, fileLength = files.length; fileIndex < fileLength; fileIndex += 1) {
        if (files[fileIndex].indexOf(prefix) === 0) {
          groupedFiles[index].push(files[fileIndex]);
        }
      };
    }

    console.log(groupedFiles);
  </script>
</head>

<body>

</body>

</html>

Collectives™ on Stack Overflow

Javascript - Restructure an array of strings based on prefix

5 Answers 5

2 Comments

3 Comments

UPDATE

FIXED

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

UPDATE

FIXED

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related