Creating subarrays with identical strings from a given array: step-by-step guide

Question

Creating subarrays with identical strings from a given array: step-by-step guide

I currently have an array structured as follows :

[
{
    "title": "name",
    "value": ""
},
{
    "title": "version",
    "value": ""
},
{
    "title": "inventory_name",
    "value": ""
},
{
    "title": "inventory_version",
    "value": ""
},
{
    "title": "differed",
    "value": ""
},
{
    "title": "differed_name",
    "value": ""
},
{
    "title": "accept_error_while_reboot",
    "value": ""
},
{
    "title": "setup_check",
    "value": ""
},
{
    "title": "setup_install",
    "value": ""
},
{
    "title": "setup_install_partial",
    "value": ""
},
{
    "title": "params_install",
    "value": ""
},
{
    "title": "params_install_partial",
    "value": ""
},
{
    "title": "results_install_ok",
    "value": ""
},
{
    "title": "results_install_reboot_defered",
    "value": ""
},
{
    "title": "results_install_reboot_immediate",
    "value": ""
},
{
    "title": "results_install_partial_ok",
    "value": ""
},
{
    "title": "results_install_partial_reboot_defered",
    "value": ""
},
{
    "title": "results_install_partial_reboot_immediate",
    "value": ""
}
];

Is there a way to create subarrays containing the same title field string?

For example, in this instance, I would like to generate:

array1 = [
 {
  "title": "differed",
  "value": ""
 },
 {
  "title": "differed_name",
  "value": ""
 }
]

array2 = [
 {
  "title": "setup_check",
  "value": ""
 },
 {
  "title": "setup_install",
  "value": ""
 },
 {
  "title": "setup_install_partial",
  "value": ""
 }
]

and so forth...

If there is only one element for a particular title, it should be represented as follows:

[
 {
 "title": "name",
 "value": ""
 }
]

I am looking for a versatile solution.

While I am aware that I could use methods such as indexOf('results') with filters, I would prefer not to hardcode specific titles since they are subject to change. Any suggestions or ideas?

Fiddle

javascript arrays grouping sub-array

Answer 1

Answer №1

If you want to organize similar items, consider utilizing an object:

var categories = {};

item_list.forEach(function(item){ 
   var category_key = item.type.split('_')[0];
   if(!categories[category_key]) {
      categories[category_key] = [];
   }
   categories[category_key].push(item);
});

To see a live demonstration in action, click here: http://jsfiddle.net/t459o6v1/3/

Answer 2

If you want to organize similar items, consider utilizing an object:

var categories = {};

item_list.forEach(function(item){ 
   var category_key = item.type.split('_')[0];
   if(!categories[category_key]) {
      categories[category_key] = [];
   }
   categories[category_key].push(item);
});

To see a live demonstration in action, click here: http://jsfiddle.net/t459o6v1/3/

Answer 3

Answer №2

Utilize the power of .reduce() to group and organize your data efficiently

var groups = data.reduce(function(result, currentValue) {
  var key = currentValue.title.split("_")[0];

  if (typeof result[key] === "undefined") {
    result[key] = [];
  }

  result[key].push(currentValue);

  return result;
}, {});

Once grouped, consider using .map() for further transformations or operations

var subArrays = Object.keys(groups).map(function(key) {
return groups[key];
});

var data = {/* Your array of objects here */};

var groups = data.reduce(function(result, currentValue) {
var key = currentValue.title.split("_")[0];
  
  if (typeof result[key] === "undefined") {
  result[key] = [];
  }
  
  result[key].push(currentValue);
  
  return result;
}, {});

var subArrays = Object.keys(groups).map(function(key) {
return groups[key];
});

console.log(JSON.stringify(subArrays));

Answer 4

Utilize the power of .reduce() to group and organize your data efficiently

var groups = data.reduce(function(result, currentValue) {
  var key = currentValue.title.split("_")[0];

  if (typeof result[key] === "undefined") {
    result[key] = [];
  }

  result[key].push(currentValue);

  return result;
}, {});

Once grouped, consider using .map() for further transformations or operations

var subArrays = Object.keys(groups).map(function(key) {
return groups[key];
});

var data = {/* Your array of objects here */};

var groups = data.reduce(function(result, currentValue) {
var key = currentValue.title.split("_")[0];
  
  if (typeof result[key] === "undefined") {
  result[key] = [];
  }
  
  result[key].push(currentValue);
  
  return result;
}, {});

var subArrays = Object.keys(groups).map(function(key) {
return groups[key];
});

console.log(JSON.stringify(subArrays));

Answer 5

Answer №3

My solution involves utilizing Immutable.JS, although a similar approach could be implemented using libraries like lodash or underscore. It's important to note that this is a functional implementation, rather than imperative.

To begin, create a function to extract the prefix:

function getPrefix(name) {
    var substr = name.substring(0, name.indexOf('_'))
    return substr ? substr : name;
}

Next, apply the groupBy function:

Immutable.fromJS(arr).groupBy(element => getPrefix(element['title']))
            .toJS();

This will result in an array of arrays with the title serving as the key.

Answer 6

My solution involves utilizing Immutable.JS, although a similar approach could be implemented using libraries like lodash or underscore. It's important to note that this is a functional implementation, rather than imperative.

To begin, create a function to extract the prefix:

function getPrefix(name) {
    var substr = name.substring(0, name.indexOf('_'))
    return substr ? substr : name;
}

Next, apply the groupBy function:

Immutable.fromJS(arr).groupBy(element => getPrefix(element['title']))
            .toJS();

This will result in an array of arrays with the title serving as the key.

Creating subarrays with identical strings from a given array: step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Why do users struggle to move between items displayed within the same component in Angular 16?

Comma styling in JavaScript

Find and filter the values in the range.getValues() array that correspond to the first element in apps script

Is Angular considered bad practice due to its reliance on singletons, despite its widespread use and popularity?

Accessing the hashtag portion of the URL in Nuxt

The error message "[Insecure URL]" was triggered at line 85 of angular.min.js in the AngularJS framework

JavaScript creating popup windowsAlternatively: JavaScript-empowered

Using Javascript to parse SOAP responses

What is the best way to extract several form elements and assign a new attribute to each of them?

JavaScript image sorting function fails to sort multiple ID elements that match

The selectors in NgRx store are failing to retrieve data from the main global store

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

Ways to darken a theme when displaying a pop-up

Creating a dynamic d3 force layout with interactive features in an Angular environment

Issue with Javascript function functionality

Validation of form inputs does not occur during typing, only when the input is blurred

Attempting to modify the Nivo slider configuration has proven to be ineffective

Adjust the Bootstrap date-time-picker to accommodate various languages, while ensuring that the selected date and time are displayed in English

Converting an AngularJS Array to Firebase JSON Format

"Encountering issues when trying to POST data from an Ember component to an