Tips on organizing data according to an array of distinct objects and selecting unique elements and string values

Question

Tips on organizing data according to an array of distinct objects and selecting unique elements and string values

In my array of objects, I need to reorganize it based on categories and convert all subcategories into strings.

 var main = [{
   "id": "1",
   "category": "Staples",
   "sub_category": "Dals & Pulses"
 }, {
   "id": "2",
   "category": "Staples",
   "sub_category": "Ghee & Oils"
 }, {
   "id": "3",
   "category": "Staples",
   "sub_category": "Atta & Flours"
 }, {
   "id": "4",
   "category": "Staples",
   "sub_category": "Masalas & Spices"
 }, {
   "id": "5",
   "category": "Snacks and Beverages",
   "sub_category": "Biscuits"
 }, {
   "id": "6",
   "category": "Snacks and Beverages",
   "sub_category": "Chips"
 }, {
   "id": "7",
   "category": "Snacks and Beverages",
   "sub_category": "Namkeen & Snacks"
 }, {
   "id": "8",
   "category": "Snacks and Beverages",
   "sub_category": "Tea"
 }]

I want to transform this data into the expected output below, with each category and its corresponding subcategories separated by commas:


> EXPECTED OUTPUT:-

 var result = [
{ 
   category: 'Staples',
   sub_cat: 'Dals & Pulses, Ghee & Oils, Atta & Flours, Masalas & Spices' },
{ 
   category: 'Snacks and Beverages',
   sub_cat: 'Biscuits, Chips, Namkeen & Snacks, Tea' 
}],

The subcategory values are string here.

This is what I have tried so far:

categories.map(key => {
                            sub_category.map(element => {
                                if (key.category == element.category) {
                                    console.log(key.category);
                                    console.log(element.sub_category);
                                }
                            });
                        });

However, the output was not as expected. I am struggling to construct a new array with the desired structure. Any ideas or suggestions would be greatly appreciated.

javascript

Answer 1

Answer №1

To efficiently gather and organize data, utilizing a Map can be the most effective method. This involves extracting key-value pairs from the data and formatting them accordingly.

The process follows this sequence:

Firstly, reduce the data using Array#reduce with a Map serving as an accumulator and output,
Next, pass this resulting Map to Array.from, which converts it to an array using an iterable and potentially a mapping function. Here, a callback is applied that processes each key/value pair to generate an object employing short hand properties.

var data = [{ id: "1", category: "Staples", sub_category: "Dals & Pulses" }, { id: "2", category: "Staples", sub_category: "Ghee & Oils" }, { id: "3", category: "Staples", sub_category: "Atta & Flours" }, { id: "4", category: "Staples", sub_category: "Masalas & Spices" }, { id: "5", category: "Snacks and Beverages", sub_category: "Biscuits" }, { id: "6", category: "Snacks and Beverages", sub_category: "Chips" }, { id: "7", category: "Snacks and Beverages", sub_category: "Namkeen & Snacks" }, { id: "8", category: "Snacks and Beverages", sub_category: "Tea" }],
    result = Array.from(
        data.reduce((m, { category, sub_category }) => m.set(category, [...(m.get(category) || []), sub_category]), new Map),
        ([category, sub_category]) => ({ category, sub_cat: sub_category.join(', ') })
    );

console.log(result);

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

A more simplified version achieves the same outcome by using an object as a hash table for categorization.

var data = [{ id: "1", category: "Staples", sub_category: "Dals & Pulses" }, { id: "2", category: "Staples", sub_category: "Ghee & Oils" }, { id: "3", category: "Staples", sub_category: "Atta & Flours" }, { id: "4", category: "Staples", sub_category: "Masalas & Spices" }, { id: "5", category: "Snacks and Beverages", sub_category: "Biscuits" }, { id: "6", category: "Snacks and Beverages", sub_category: "Chips" }, { id: "7", category: "Snacks and Beverages", sub_category: "Namkeen & Snacks" }, { id: "8", category: "Snacks and Beverages", sub_category: "Tea" }],
    hash = {},
    item,
    i
    result = [];

for (i = 0; i < data.length; i++) {
    item = data[i];
    if (!hash[item.category]) {
        hash[item.category] = { category: item.category, sub_cat: item.sub_category };
        result.push(hash[item.category]);
        continue;
    }
    hash[item.category].sub_cat += ', ' + item.sub_category;
}

console.log(result);

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

Answer 2

To efficiently gather and organize data, utilizing a Map can be the most effective method. This involves extracting key-value pairs from the data and formatting them accordingly.

The process follows this sequence:

Firstly, reduce the data using Array#reduce with a Map serving as an accumulator and output,
Next, pass this resulting Map to Array.from, which converts it to an array using an iterable and potentially a mapping function. Here, a callback is applied that processes each key/value pair to generate an object employing short hand properties.

var data = [{ id: "1", category: "Staples", sub_category: "Dals & Pulses" }, { id: "2", category: "Staples", sub_category: "Ghee & Oils" }, { id: "3", category: "Staples", sub_category: "Atta & Flours" }, { id: "4", category: "Staples", sub_category: "Masalas & Spices" }, { id: "5", category: "Snacks and Beverages", sub_category: "Biscuits" }, { id: "6", category: "Snacks and Beverages", sub_category: "Chips" }, { id: "7", category: "Snacks and Beverages", sub_category: "Namkeen & Snacks" }, { id: "8", category: "Snacks and Beverages", sub_category: "Tea" }],
    result = Array.from(
        data.reduce((m, { category, sub_category }) => m.set(category, [...(m.get(category) || []), sub_category]), new Map),
        ([category, sub_category]) => ({ category, sub_cat: sub_category.join(', ') })
    );

console.log(result);

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

A more simplified version achieves the same outcome by using an object as a hash table for categorization.

var data = [{ id: "1", category: "Staples", sub_category: "Dals & Pulses" }, { id: "2", category: "Staples", sub_category: "Ghee & Oils" }, { id: "3", category: "Staples", sub_category: "Atta & Flours" }, { id: "4", category: "Staples", sub_category: "Masalas & Spices" }, { id: "5", category: "Snacks and Beverages", sub_category: "Biscuits" }, { id: "6", category: "Snacks and Beverages", sub_category: "Chips" }, { id: "7", category: "Snacks and Beverages", sub_category: "Namkeen & Snacks" }, { id: "8", category: "Snacks and Beverages", sub_category: "Tea" }],
    hash = {},
    item,
    i
    result = [];

for (i = 0; i < data.length; i++) {
    item = data[i];
    if (!hash[item.category]) {
        hash[item.category] = { category: item.category, sub_cat: item.sub_category };
        result.push(hash[item.category]);
        continue;
    }
    hash[item.category].sub_cat += ', ' + item.sub_category;
}

console.log(result);

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

Answer 3

Answer №2

Here's a different approach to tackle this. I've iterated through the main array, adding the first element to the result array and capturing the first instance of each category in the availableCat array. Then, by using the availableCat array, I identified subsequent occurrences of the same category and concatenated the data accordingly.

var main = [{
   "id": "1",
   "category": "Staples",
   "sub_category": "Dals & Pulses"
 }, {
   "id": "2",
   "category": "Staples",
   "sub_category": "Ghee & Oils"
 }, {
   "id": "3",
   "category": "Staples",
   "sub_category": "Atta & Flours"
 }, {
   "id": "4",
   "category": "Staples",
   "sub_category": "Masalas & Spices"
 }, {
   "id": "5",
   "category": "Snacks and Beverages",
   "sub_category": "Biscuits"
 }, {
   "id": "6",
   "category": "Snacks and Beverages",
   "sub_category": "Chips"
 }, {
   "id": "7",
   "category": "Snacks and Beverages",
   "sub_category": "Namkeen & Snacks"
 }, {
   "id": "8",
   "category": "Snacks and Beverages",
   "sub_category": "Tea"
 }]

var result=[];
var availableCat = [];
main.forEach(function(data){
  if(availableCat.indexOf(data.category) >= 0){
    result.forEach(function(cnt){
      if(cnt.category == data.category){
        cnt.sub_cat += ', '+ data.sub_category
      }
    })
  }
  else {
    availableCat.push(data.category);
    var item = {"category" : data.category, "sub_cat" : data.sub_category}
    result.push(item);
  }
})

console.log(result)

Answer 4

Here's a different approach to tackle this. I've iterated through the main array, adding the first element to the result array and capturing the first instance of each category in the availableCat array. Then, by using the availableCat array, I identified subsequent occurrences of the same category and concatenated the data accordingly.

var main = [{
   "id": "1",
   "category": "Staples",
   "sub_category": "Dals & Pulses"
 }, {
   "id": "2",
   "category": "Staples",
   "sub_category": "Ghee & Oils"
 }, {
   "id": "3",
   "category": "Staples",
   "sub_category": "Atta & Flours"
 }, {
   "id": "4",
   "category": "Staples",
   "sub_category": "Masalas & Spices"
 }, {
   "id": "5",
   "category": "Snacks and Beverages",
   "sub_category": "Biscuits"
 }, {
   "id": "6",
   "category": "Snacks and Beverages",
   "sub_category": "Chips"
 }, {
   "id": "7",
   "category": "Snacks and Beverages",
   "sub_category": "Namkeen & Snacks"
 }, {
   "id": "8",
   "category": "Snacks and Beverages",
   "sub_category": "Tea"
 }]

var result=[];
var availableCat = [];
main.forEach(function(data){
  if(availableCat.indexOf(data.category) >= 0){
    result.forEach(function(cnt){
      if(cnt.category == data.category){
        cnt.sub_cat += ', '+ data.sub_category
      }
    })
  }
  else {
    availableCat.push(data.category);
    var item = {"category" : data.category, "sub_cat" : data.sub_category}
    result.push(item);
  }
})

console.log(result)

Answer 5

Answer №3

Here's an alternative method using lodash and Array.reduce

var _ = require('lodash')
var items = [{
    "id": "1",
    "category": "Staples",
    "sub_category": "Dals & Pulses"
}, {
    "id": "2",
    "category": "Staples",
    "sub_category": "Ghee & Oils"
}, {
    "id": "3",
    "category": "Staples",
    "sub_category": "Atta & Flours"
}, {
    "id": "4",
    "category": "Staples",
    "sub_category": "Masalas & Spices"
}, {
    "id": "5",
    "category": "Snacks and Beverages",
    "sub_category": "Biscuits"
}, {
    "id": "6",
    "category": "Snacks and Beverages",
    "sub_category": "Chips"
}, {
    "id": "7",
    "category": "Snacks and Beverages",
    "sub_category": "Namkeen & Snacks"
}, {
    "id": "8",
    "category": "Snacks and Beverages",
    "sub_category": "Tea"
}]

var categorizedItems = _.groupBy(items,'category')

var groupedResult = Object.keys(categorizedItems).map(key => {
    return {
        category: key,
        sub_categories: categorizedItems[key].reduce((acc, curr) => acc = acc + curr.sub_category + ', ','')
    }
})
console.log(groupedResult)

Answer 6

Here's an alternative method using lodash and Array.reduce

var _ = require('lodash')
var items = [{
    "id": "1",
    "category": "Staples",
    "sub_category": "Dals & Pulses"
}, {
    "id": "2",
    "category": "Staples",
    "sub_category": "Ghee & Oils"
}, {
    "id": "3",
    "category": "Staples",
    "sub_category": "Atta & Flours"
}, {
    "id": "4",
    "category": "Staples",
    "sub_category": "Masalas & Spices"
}, {
    "id": "5",
    "category": "Snacks and Beverages",
    "sub_category": "Biscuits"
}, {
    "id": "6",
    "category": "Snacks and Beverages",
    "sub_category": "Chips"
}, {
    "id": "7",
    "category": "Snacks and Beverages",
    "sub_category": "Namkeen & Snacks"
}, {
    "id": "8",
    "category": "Snacks and Beverages",
    "sub_category": "Tea"
}]

var categorizedItems = _.groupBy(items,'category')

var groupedResult = Object.keys(categorizedItems).map(key => {
    return {
        category: key,
        sub_categories: categorizedItems[key].reduce((acc, curr) => acc = acc + curr.sub_category + ', ','')
    }
})
console.log(groupedResult)

Answer 7

Answer №4

To begin, organize the array of objects based on the category property by utilizing the Array#prototype#reduce method. Following that, concatenate the subcategories using the Array#prototype#join function.

const main = [
 {
   "id": "1",
   "category": "Staples",
   "sub_category": "Dals & Pulses"
 }, {
   "id": "2",
   "category": "Staples",
   "sub_category": "Ghee & Oils"
 }, {
   "id": "3",
   "category": "Staples",
   "sub_category": "Atta & Flours"
 }, {
   "id": "4",
   "category": "Staples",
   "sub_category": "Masalas & Spices"
 }, {
   "id": "5",
   "category": "Snacks and Beverages",
   "sub_category": "Biscuits"
 }, {
   "id": "6",
   "category": "Snacks and Beverages",
   "sub_category": "Chips"
 }, {
   "id": "7",
   "category": "Snacks and Beverages",
   "sub_category": "Namkeen & Snacks"
 }, {
   "id": "8",
   "category": "Snacks and Beverages",
   "sub_category": "Tea"
 }
];    

const result = Object.values(main.reduce((acc, curr) => { 
const { category, sub_category } = curr;
    if (!acc[category]) {
    acc[category] = {
        category: category,
        sub_category: [ sub_category ]
    };
}
else {
    acc[category].sub_category.push(sub_category);
}

return acc;
}, {}))
.map(x => {
const { sub_category, ...rest } = x;
return {
...rest,
sub_category: sub_category.join(', ')
};
});

console.log(result);

Answer 8

To begin, organize the array of objects based on the category property by utilizing the Array#prototype#reduce method. Following that, concatenate the subcategories using the Array#prototype#join function.

const main = [
 {
   "id": "1",
   "category": "Staples",
   "sub_category": "Dals & Pulses"
 }, {
   "id": "2",
   "category": "Staples",
   "sub_category": "Ghee & Oils"
 }, {
   "id": "3",
   "category": "Staples",
   "sub_category": "Atta & Flours"
 }, {
   "id": "4",
   "category": "Staples",
   "sub_category": "Masalas & Spices"
 }, {
   "id": "5",
   "category": "Snacks and Beverages",
   "sub_category": "Biscuits"
 }, {
   "id": "6",
   "category": "Snacks and Beverages",
   "sub_category": "Chips"
 }, {
   "id": "7",
   "category": "Snacks and Beverages",
   "sub_category": "Namkeen & Snacks"
 }, {
   "id": "8",
   "category": "Snacks and Beverages",
   "sub_category": "Tea"
 }
];    

const result = Object.values(main.reduce((acc, curr) => { 
const { category, sub_category } = curr;
    if (!acc[category]) {
    acc[category] = {
        category: category,
        sub_category: [ sub_category ]
    };
}
else {
    acc[category].sub_category.push(sub_category);
}

return acc;
}, {}))
.map(x => {
const { sub_category, ...rest } = x;
return {
...rest,
sub_category: sub_category.join(', ')
};
});

console.log(result);

Tips on organizing data according to an array of distinct objects and selecting unique elements and string values

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Expanding the width of CSS dropdown menus according to their content

Tips for eliminating the domain name from the src URL attribute using Jquery

Guide on making a PDF input field function like a regular input field with PDF.js

Angular directive ceases to trigger

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

The issue of infinite rendering caused by useState and how to effectively resolve it

Is it possible to dynamically change an ngModel value directly from the component?

Sharing data between two Angular 2 component TypeScript files

Error: The code is trying to access the property 'string' of an undefined variable. To fix this issue, make sure to

Expressjs Error- ReferenceError: cors has not been defined in this context

Exploring the possibilities of page manipulation using React Native WebView

Ensure that data is not cached after the page is refreshed at regular intervals of x seconds

A script in PHP or JavaScript that dynamically generates two dual drop-down menus to assist with data selection

Map Loader for GeoJson Leaflet Integration

The error message "A form control with an invalid name attribute is not focusable" is displayed when attempting to use an input type file in Material

What is the best method to convert data into the proper tensor format in Angular?

The transformation in the resulting array is evident when a nested array is altered after being concatenated using Array.concat

Merging object keys and values from JSON arrays based on their keys, using JavaScript

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it