Organize a collection of objects based on their individual keys

Question

Organize a collection of objects based on their individual keys

How can an array of objects be grouped based on keys using vanilla JavaScript, especially when dealing with a large number of records like 10000? Here is a sample object to illustrate:

[
 {
  company: "TATA",
  car: "TATA Indica",
  color: "Blue"
 },
 {
  company: "TATA",
  car: "TATA Indica",
  color: "Black"
 },
 {
  company: "TATA",
  car: "Safari",
  color: "Blue"
 },
 {
   company: "Suzuki",
    car: "",
    color: ""
 }
]

The desired output should look like this:

{
   "company": ["TATA", "Suzuki"],
   "car": ["TATA Indica", "Safari"],
   "color": ["Blue", "Black"]
}

javascript arrays json object data-structures

Answer 1

Answer №1

One efficient way to tackle this would be utilizing the power of reduce, along with enhancing it further by incorporating Map.

const arr = [{
    company: "TATA",
    car: "TATA Indica",
    color: "Blue",
  },
  {
    company: "TATA",
    car: "TATA Indica",
    color: "Black",
  },
  {
    company: "TATA",
    car: "Safari",
    color: "Blue",
  },
  {
    company: "Suzuki",
    car: "",
    color: "",
  },
];

const result = arr.reduce((acc, curr) => {
  Object.keys(curr).forEach((k) => {
    if (curr[k]) {
      if (!acc[k]) acc[k] = new Set();
      else acc[k].add(curr[k]);
    }
  });
  return acc;
}, {});

Object.keys(result).forEach((k) => (result[k] = [...result[k]]));
console.log(result);

Answer 2

One efficient way to tackle this would be utilizing the power of reduce, along with enhancing it further by incorporating Map.

const arr = [{
    company: "TATA",
    car: "TATA Indica",
    color: "Blue",
  },
  {
    company: "TATA",
    car: "TATA Indica",
    color: "Black",
  },
  {
    company: "TATA",
    car: "Safari",
    color: "Blue",
  },
  {
    company: "Suzuki",
    car: "",
    color: "",
  },
];

const result = arr.reduce((acc, curr) => {
  Object.keys(curr).forEach((k) => {
    if (curr[k]) {
      if (!acc[k]) acc[k] = new Set();
      else acc[k].add(curr[k]);
    }
  });
  return acc;
}, {});

Object.keys(result).forEach((k) => (result[k] = [...result[k]]));
console.log(result);

Answer 3

Answer №2

One approach for handling primitive values efficiently is to utilize a combination of Set and Map. The Map data structure can be used for keys, while the Set data structure can be used for values.

const brands = ["Apple", "Samsung", "Google", ""];
const products = ["iPhone", "Galaxy", "Pixel", ""];
const colors = ["Blue", "Black", "Red", "Yellow", ""]
const arr = Array.from({length: 1000}, (v, i) => ({
  brand: brands[i % brands.length],
  product: products[i % products.length],
  color: colors[i % colors.length]
}));

console.time('Process');
const map = new Map();
for(let item of arr) {
  for(let key of Object.keys(item)){
    let keySet = map.get(key);
    if(!keySet){
      keySet = new Set();
      map.set(key, keySet);
    }
    const value = item[key];
    if(value !== '') {
      keySet.add(item[key]);
    }
  }
}
const result = {};
for(let key of map.keys()) {
  result[key] = Array.from(map.get(key));
}
console.timeEnd('Process');
console.log(result);

Answer 4

One approach for handling primitive values efficiently is to utilize a combination of Set and Map. The Map data structure can be used for keys, while the Set data structure can be used for values.

const brands = ["Apple", "Samsung", "Google", ""];
const products = ["iPhone", "Galaxy", "Pixel", ""];
const colors = ["Blue", "Black", "Red", "Yellow", ""]
const arr = Array.from({length: 1000}, (v, i) => ({
  brand: brands[i % brands.length],
  product: products[i % products.length],
  color: colors[i % colors.length]
}));

console.time('Process');
const map = new Map();
for(let item of arr) {
  for(let key of Object.keys(item)){
    let keySet = map.get(key);
    if(!keySet){
      keySet = new Set();
      map.set(key, keySet);
    }
    const value = item[key];
    if(value !== '') {
      keySet.add(item[key]);
    }
  }
}
const result = {};
for(let key of map.keys()) {
  result[key] = Array.from(map.get(key));
}
console.timeEnd('Process');
console.log(result);

Answer 5

Answer №3

It appears that the data you are working with has a consistent structure throughout. In this scenario, you can predefine the shape of the final object and then populate it by accumulating the data while checking for non-empty values. One approach is to utilize Map and Set for gathering the data and then transforming it into the desired result object.

const data = [{ company: 'TATA', car: 'TATA Indica', color: 'Blue' }, { company: 'TATA', car: 'TATA Indica', color: 'Black' }, { company: 'TATA', car: 'Safari', color: 'Blue' }, { company: 'Suzuki', car: '', color: '' },];

const map = new Map(Object.keys(data[0]).map((k) => [k, new Set()]));

for (const d of data) {
  for (const k of map.keys()) {
    if (d[k] !== '') {
      map.get(k).add(d[k]);
    }
  }
}

const result = {};
for (const k of map.keys()) {
  result[k] = Array.from(map.get(k));
}

console.log(result);

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

Interestingly, a seemingly simple implementation surprisingly turns out to be quite efficient (according to @Totati's benchmark). It involves serial calls of map().filter().

const data = [{ company: 'TATA', car: 'TATA Indica', color: 'Blue' }, { company: 'TATA', car: 'TATA Indica', color: 'Black' }, { company: 'TATA', car: 'Safari', color: 'Blue' }, { company: 'Suzuki', car: '', color: '' },];

const result = {};

for (const k of Object.keys(data[0])) {
  result[k] = Array.from(
    new Set(data.map(({ [k]: key }) => key).filter((n) => n !== ''))
  );
}

console.log(result);

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

Answer 6

It appears that the data you are working with has a consistent structure throughout. In this scenario, you can predefine the shape of the final object and then populate it by accumulating the data while checking for non-empty values. One approach is to utilize Map and Set for gathering the data and then transforming it into the desired result object.

const data = [{ company: 'TATA', car: 'TATA Indica', color: 'Blue' }, { company: 'TATA', car: 'TATA Indica', color: 'Black' }, { company: 'TATA', car: 'Safari', color: 'Blue' }, { company: 'Suzuki', car: '', color: '' },];

const map = new Map(Object.keys(data[0]).map((k) => [k, new Set()]));

for (const d of data) {
  for (const k of map.keys()) {
    if (d[k] !== '') {
      map.get(k).add(d[k]);
    }
  }
}

const result = {};
for (const k of map.keys()) {
  result[k] = Array.from(map.get(k));
}

console.log(result);

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

Interestingly, a seemingly simple implementation surprisingly turns out to be quite efficient (according to @Totati's benchmark). It involves serial calls of map().filter().

const data = [{ company: 'TATA', car: 'TATA Indica', color: 'Blue' }, { company: 'TATA', car: 'TATA Indica', color: 'Black' }, { company: 'TATA', car: 'Safari', color: 'Blue' }, { company: 'Suzuki', car: '', color: '' },];

const result = {};

for (const k of Object.keys(data[0])) {
  result[k] = Array.from(
    new Set(data.map(({ [k]: key }) => key).filter((n) => n !== ''))
  );
}

console.log(result);

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

Answer 7

Answer №4

If you want to efficiently store unique values for each key and then convert them back into an array later, one method is to utilize the Set data structure.

const information = [
  {
    category: "Fruit",
    item: "Apple",
    color: "Red",
  },
  {
    category: "Fruit",
    item: "Banana",
    color: "Yellow",
  },
  {
    category: "Vegetable",
    item: "Carrot",
    color: "Orange",
  },
]

let result = information.reduce((accumulator, element) => {
  for (const [property, value] of Object.entries(element)) {
    if (!value) continue

    if (property in accumulator) {
      const set = new Set(accumulator[property])
      set.add(value)
      accumulator[property] = Array.from(set)
    } else {
      accumulator[property] = [value]
    }
  }

  return accumulator
}, {})

console.log(result)

Answer 8

If you want to efficiently store unique values for each key and then convert them back into an array later, one method is to utilize the Set data structure.

const information = [
  {
    category: "Fruit",
    item: "Apple",
    color: "Red",
  },
  {
    category: "Fruit",
    item: "Banana",
    color: "Yellow",
  },
  {
    category: "Vegetable",
    item: "Carrot",
    color: "Orange",
  },
]

let result = information.reduce((accumulator, element) => {
  for (const [property, value] of Object.entries(element)) {
    if (!value) continue

    if (property in accumulator) {
      const set = new Set(accumulator[property])
      set.add(value)
      accumulator[property] = Array.from(set)
    } else {
      accumulator[property] = [value]
    }
  }

  return accumulator
}, {})

console.log(result)

Organize a collection of objects based on their individual keys

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

MUI: The value you have chosen for the select component is outside the acceptable range - `[object Object]`

Having trouble loading AngularJS 2 router

Displaying error messages for bad requests in a Web API using JSON and AJAX

Ionic 3 Storage Timing Explained

Traversing through a arranged associative array

Utilize jQuery to extract data from a Steam page in JSON format

RainTpl: accessing specific array value within loop based on key

jQuery load fails to fill select dropdown

organizing a List<Object> both numerically and alphabetically by the field 'product' in the Object

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

Troubles with uploading a hefty file

Creating Table Rows on-the-fly

Set the HTML content as a string in the Html variable, similar to innerHTML but without using JavaScript directly from an external

Guide on expanding the capabilities of IterableIterator in TypeScript

Ingesting JSON data from ZIP files into MongoDB using Python

"Integrate a URL segment into the primary URL with the help of AngularJS or JavaScript

What is the best way to aggregate totals by date in Ruby when working with an array of hashes?

What causes an error when attempting to add a new user to the database?

Guide on using react-highlight-words to emphasize various keywords using different color schemes

The webservice encountered an issue while trying to interpret the JSON Request coming from a PHP file