Eliminating repeated keys from an array of objects

Question

Eliminating repeated keys from an array of objects

I'm dealing with an array of objects that looks like this

let array = [
  {
    sector: "adad"
  },
  {
    sector: "adadasdsd"
  },
  {
    sector: "sdsdsd"
  },
  {
    origin: "sdfsf"
  },
  {
    destination: "dfsfsdf"
  }
];

My goal is to transform it into this format:

let array = [
  { sector: ["adad", "adadasdsd", "sdsdsd"] },
  { origin: ["sdfsf"] },
  { destination: ["dfsfsdf"] }
];

I believe using the reduce method is the way to go here, but I'm struggling with the implementation. Any guidance on how to achieve this transformation?

javascript arrays javascript-objects reduce

Answer 1

Answer №1

To efficiently store values with the same keys and then map them to single key/value pairs, consider using a hash table with a mapping function.

let array = [{ sector: "adad" }, { sector: "adadasdsd" }, { sector: "sdsdsd" }, { origin: "sdfsf" }, { destination: "dfsfsdf" }],
    grouped = Object
        .entries(array.reduce(
            (result, obj) => (
                Object.entries(obj).forEach(([key, value]) => (result[key] = result[key] || []).push(value)),
                result
            ),
            Object.create(null)
        ))
        .map(([key, value]) => ({ [key]: value }));
   
console.log(grouped);

Answer 2

To efficiently store values with the same keys and then map them to single key/value pairs, consider using a hash table with a mapping function.

let array = [{ sector: "adad" }, { sector: "adadasdsd" }, { sector: "sdsdsd" }, { origin: "sdfsf" }, { destination: "dfsfsdf" }],
    grouped = Object
        .entries(array.reduce(
            (result, obj) => (
                Object.entries(obj).forEach(([key, value]) => (result[key] = result[key] || []).push(value)),
                result
            ),
            Object.create(null)
        ))
        .map(([key, value]) => ({ [key]: value }));
   
console.log(grouped);

Answer 3

Answer №2

One possible solution involves utilizing the jQuery library.

let newArrays = {
        category: [],
        start: [],
        end: []
    }


$.each(existingArray, function (_index, item) {
    if (item.category != null)
        newArrays.category.push(item.category)
    if (item.start != null)
        newArrays.start.push(item.start)
    if (item.end != null)
        newArrays.end.push(item.end)
})

Answer 4

One possible solution involves utilizing the jQuery library.

let newArrays = {
        category: [],
        start: [],
        end: []
    }


$.each(existingArray, function (_index, item) {
    if (item.category != null)
        newArrays.category.push(item.category)
    if (item.start != null)
        newArrays.start.push(item.start)
    if (item.end != null)
        newArrays.end.push(item.end)
})

Answer 5

Answer №3

Using the Vanilla solution along with reduce function:

let data =   [
  {
    "type": "apple"
  },
  {
    "type": "banana"
  },
  {
    "type": "orange"
  },
  {
    "color": "red"
  },
  {
    "size": "large"
  }
]

let organized = data.reduce((acc, entry) => {
  if (entry.type) { acc[0].type.push(entry.type); }
  else if (entry.color) { acc[1].color.push(entry.color); }
  else { acc[2].size.push(entry.size); }
  return acc;
}, [{type: []}, {color: []}, {size: []}]);

console.log(organized);

Answer 6

Using the Vanilla solution along with reduce function:

let data =   [
  {
    "type": "apple"
  },
  {
    "type": "banana"
  },
  {
    "type": "orange"
  },
  {
    "color": "red"
  },
  {
    "size": "large"
  }
]

let organized = data.reduce((acc, entry) => {
  if (entry.type) { acc[0].type.push(entry.type); }
  else if (entry.color) { acc[1].color.push(entry.color); }
  else { acc[2].size.push(entry.size); }
  return acc;
}, [{type: []}, {color: []}, {size: []}]);

console.log(organized);

Answer 7

Answer №4

Here is a simple solution incorporating the Array.prototype.reduce() method:

let data = [{"type": "apple"},{"type": "banana"},{"type": "orange"},{"category": "fruit"},{"category": "vegetable"}]

let transformedData = data.reduce((accumulator, currentValue, index) => {
  let key = Object.keys(currentValue)[0];
  if (!(key in accumulator)) accumulator[key] = [];
  if (!accumulator[key].includes(currentValue[key])) accumulator[key].push(currentValue[key]);
  return accumulator;
}, {})

console.log(transformedData)

Answer 8

Here is a simple solution incorporating the Array.prototype.reduce() method:

let data = [{"type": "apple"},{"type": "banana"},{"type": "orange"},{"category": "fruit"},{"category": "vegetable"}]

let transformedData = data.reduce((accumulator, currentValue, index) => {
  let key = Object.keys(currentValue)[0];
  if (!(key in accumulator)) accumulator[key] = [];
  if (!accumulator[key].includes(currentValue[key])) accumulator[key].push(currentValue[key]);
  return accumulator;
}, {})

console.log(transformedData)

Answer 9

Answer №5

Check out this approach:

const data =   [
  {
    "fruit": "apple"
  },
  {
    "fruit": "banana"
  },
  {
    "vegetable": "carrot"
  },
  {
    "fruit": "orange"
  },
  {
    "vegetable": "lettuce"
  }
]

let result = [];
data.map(item=>{
  let key = Object.keys(item)[0], value = item[key],
      objResult = result.filter(r=>r[key]);  
  if (objResult.length == 0) {
      let obj = {};
      obj[key] = [value];
      result.push(obj);
  } else 
      objResult[0][key].push(value);
});

console.log(result);

Answer 10

Check out this approach:

const data =   [
  {
    "fruit": "apple"
  },
  {
    "fruit": "banana"
  },
  {
    "vegetable": "carrot"
  },
  {
    "fruit": "orange"
  },
  {
    "vegetable": "lettuce"
  }
]

let result = [];
data.map(item=>{
  let key = Object.keys(item)[0], value = item[key],
      objResult = result.filter(r=>r[key]);  
  if (objResult.length == 0) {
      let obj = {};
      obj[key] = [value];
      result.push(obj);
  } else 
      objResult[0][key].push(value);
});

console.log(result);

Answer 11

Answer №6

If you employ the combination of Array.reduce and Map as the accumulator, you can efficiently tackle this problem with brevity:

let data = [{ name: "John" }, { name: "Jane" }, { age: 25 }, { gender: "Male" }, { city: "New York" } ];

const result = data.reduce((accumulator, currentValue, index, array) => {
  Object.keys(currentValue).forEach(key => accumulator.set(key, [...(accumulator.get(key)||[]), currentValue[key]]))
  return index == array.length - 1 ? Array.from(accumulator, ([k,v]) => ({[k]: v})) : accumulator
}, new Map())

console.log(result)

Answer 12

If you employ the combination of Array.reduce and Map as the accumulator, you can efficiently tackle this problem with brevity:

let data = [{ name: "John" }, { name: "Jane" }, { age: 25 }, { gender: "Male" }, { city: "New York" } ];

const result = data.reduce((accumulator, currentValue, index, array) => {
  Object.keys(currentValue).forEach(key => accumulator.set(key, [...(accumulator.get(key)||[]), currentValue[key]]))
  return index == array.length - 1 ? Array.from(accumulator, ([k,v]) => ({[k]: v})) : accumulator
}, new Map())

console.log(result)

Eliminating repeated keys from an array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

I am struggling with clicking on Bootstrap's pagination using AngularJS

Are you unsure whether to use Ajax or jQuery? If you need assistance in adding parameters to

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

Locate a jquery element that is within a parent element containing specific text

Showing nested routes component information - Angular

What could be the reason for the "begin" script failing to execute?

What is the best way to initiate a change event using JavaScript?

Ember - Issue with Page Display

Leveraging Expressjs to act as a proxy for handling cross-origin requests made via AJAX

Tips for creating nested maps of an array without triggering the key prop warning

The context of the selector causes an error to be thrown

Issue with Titanium: Unable to scroll within tableview

Using Jquery's $.each() method within an ajax call can be a powerful

Passing values to the next page is not functioning as expected

Module for Node.js that handles .ini files where variable names can begin with a number

identify when the React component has reached the bottom of the element by reading the

Text area featuring unique border design, with border color change upon focus?

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

Insert a JSX element into the body of a webpage using React JSX

Type in "Date" and select a date using your mobile device