Restrict or diminish an array of strings based on a specific substring

Question

Restrict or diminish an array of strings based on a specific substring

I have an array containing various strings like:

let arr = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes"]

and I'm looking to create a new array with one item from each category of substrings ("cap", "col", "screen"), choosing the one with the smallest index:

let newArray = ["cap:1","col:red","screen:yes"]

//"cap:1" which is taken from arr[0]

I've attempted solving this problem in the following way:

const newArr = (arr) => {
    let c= []
    let c = [...c, arr[0]]  
    for(let i = 1; i<arr.length; i++){
        for (let j=0; j<c.length; j++){
            if(arr[i].split(":")[0] !== c[j].split(":")){
                c = [...c, arr[i]]
            }
        }
    }
    return c  
}

However, this approach leads to an infinite loop and results in output like:

["cap:1","col:red","col:red","col:red","col:red","col:red","col:red","col:red"...

Could someone please assist me with this issue?
Thank you!

javascript arrays string filter split

Answer 1

Answer №1

When dealing with nested for loops and iterating through an ever-increasing array, it's easy to land in an infinite loop situation. To avoid this, consider using an object as a reference point instead.

let arr = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes"];
const newArr = (arr) => {
  let c = [];
  const suffixObj = {};
  for (let i = 0; i < arr.length; i++) {
    const getPrefix = arr[i].split(":")[0];
    if (!suffixObj.hasOwnProperty(getPrefix)) {
      c.push(arr[i]);
      suffixObj[getPrefix] = true
    }
  }

  return c
};

console.log(newArr(arr))

Answer 2

When dealing with nested for loops and iterating through an ever-increasing array, it's easy to land in an infinite loop situation. To avoid this, consider using an object as a reference point instead.

let arr = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes"];
const newArr = (arr) => {
  let c = [];
  const suffixObj = {};
  for (let i = 0; i < arr.length; i++) {
    const getPrefix = arr[i].split(":")[0];
    if (!suffixObj.hasOwnProperty(getPrefix)) {
      c.push(arr[i]);
      suffixObj[getPrefix] = true
    }
  }

  return c
};

console.log(newArr(arr))

Answer 3

Answer №2

If you use a Set and split the first parts of an array, you can then return an array from the set.

Simply follow this example:

const
    items = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes"],
    types = [...new Set(items.map(item => item.split(':', 1)[0]))];

console.log(types);

Answer 4

If you use a Set and split the first parts of an array, you can then return an array from the set.

Simply follow this example:

const
    items = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes"],
    types = [...new Set(items.map(item => item.split(':', 1)[0]))];

console.log(types);

Answer 5

Answer №3

Your logic lacks the ability to confirm whether the prefix of the current element was not located in newArr. Additionally, the condition

arr[i].split(":")[0] !== c[j].split(":") is comparing a string to an array, yielding a result of <code>true

- string !== array.

Perhaps you intended to write

arr[i].split(":")[0] !== c[j].split(":")[0]

, which still would not produce the desired outcome.

You can avoid using the inner loop and instead check each element against newArr by utilizing c.every(el => !...) like this:

let arr = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes'];

const newArr = (arr) => {
    let c = [arr[0]]; 
    for(let i = 1; i<arr.length; i++) {
        if( c.every(el => !arr[i].startsWith( el.split(':')[0] )) ) {
            c = [ ...c, arr[i] ];
        }
    }
    return c; 
}

console.log( newArr( arr ) );

Answer 6

Your logic lacks the ability to confirm whether the prefix of the current element was not located in newArr. Additionally, the condition

arr[i].split(":")[0] !== c[j].split(":") is comparing a string to an array, yielding a result of <code>true

- string !== array.

Perhaps you intended to write

arr[i].split(":")[0] !== c[j].split(":")[0]

, which still would not produce the desired outcome.

You can avoid using the inner loop and instead check each element against newArr by utilizing c.every(el => !...) like this:

let arr = ["cap:1", "col:red", "cap:3", "cap:1", "col:blue", "screen:yes'];

const newArr = (arr) => {
    let c = [arr[0]]; 
    for(let i = 1; i<arr.length; i++) {
        if( c.every(el => !arr[i].startsWith( el.split(':')[0] )) ) {
            c = [ ...c, arr[i] ];
        }
    }
    return c; 
}

console.log( newArr( arr ) );

Answer 7

Answer №4

Using Array.Reduce is a smart approach for consolidating multiple array values into a concise object structure. By breaking down the entries into key-value pairs and selecting the first entry for each key, you can efficiently achieve this transformation. Here's a sample implementation that may suit your needs:

const groupFirstValues = arr => arr.reduce((result, currentValue) => {
   const parts = currentValue.split(':');
   const key = parts[0];
   const value = parts[1];
   if (!result.hasOwnProperty(key)) {
      result[key] = value;
   }
   return result;
});

If you require the output to be in array format, you can reconstruct the data accordingly. However, accessing the resulting object should still offer decent performance.

Answer 8

Using Array.Reduce is a smart approach for consolidating multiple array values into a concise object structure. By breaking down the entries into key-value pairs and selecting the first entry for each key, you can efficiently achieve this transformation. Here's a sample implementation that may suit your needs:

const groupFirstValues = arr => arr.reduce((result, currentValue) => {
   const parts = currentValue.split(':');
   const key = parts[0];
   const value = parts[1];
   if (!result.hasOwnProperty(key)) {
      result[key] = value;
   }
   return result;
});

If you require the output to be in array format, you can reconstruct the data accordingly. However, accessing the resulting object should still offer decent performance.

Answer 9

Answer №5

Check out this helpful tip for you! Start by organizing all the information into a key-value format. Once you have this stream, you can simplify it by only keeping the first occurrence.

let updatedData = data.map(function(item){
        return item.split(":")
    }).reduce(function(accumulator, current){
        if(accumulator[current[0]] === undefined){
            accumulator[current[0]] = current[1]
        }
        return accumulator
    })

Answer 10

Check out this helpful tip for you! Start by organizing all the information into a key-value format. Once you have this stream, you can simplify it by only keeping the first occurrence.

let updatedData = data.map(function(item){
        return item.split(":")
    }).reduce(function(accumulator, current){
        if(accumulator[current[0]] === undefined){
            accumulator[current[0]] = current[1]
        }
        return accumulator
    })

Restrict or diminish an array of strings based on a specific substring

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for transporting an npm module to a different file without reliance on the require function in that specific file

Angular Cascade of Multiple Requests

The bcryptjs function bcrypt.compare consistently gives a result of false

Querying in mongodb based on a field in a referenced document: Tips and techniques

What could be the reason for the lack of data updates in my component?

Is it possible to include an onclick event in a hyperlink tag to initiate an ajax call

Organizing multidimensional array in PHP - tackling challenges with dates and numerical order

A structure array pointer in C pointing to a structure, within another structure

What is the process of transforming an object into an array in C#?

The variable is constantly reverting back to its initial value

I am confused about what my teacher wants me to do. Have I interpreted the task correctly?

Only when the user has successfully completed the reCAPTCHA and checked the checkbox, Vue will be able to

Is it necessary to call cancelAnimationFrame before the next requestAnimationFrame?

Using Bootstrap datepicker to show dates in Month YYYY format and then sending the data to server as MMYYYY for processing

Guide on accessing text content from a sibling div element using jQuery

The mysterious workings of the parseInt() function

What steps are involved in setting up a local server on my computer in order to create an API that can process http requests from Flutter?

Both the maxlenght and ng-maxlength directives appear to be ineffective in AngularJS

using ng-repeat within a nested loop to iterate through objects nested within other objects

Analyzing nested arrays against dictionary keys