Minimize a collection of JavaScript objects

Question

Minimize a collection of JavaScript objects

I am working with an Array of objects where I need to return the collection as an Object, with the key names being the indexes of their length. Additionally, I have to filter this object based on its values.

Check out my code snippet below:

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const getGroupBy = (data) => {
  return data.reduce((acc, curr, currIndex, arr) => {
    const val = curr.value;
    const idx = curr.index;
    const fValues = arr.filter((el) => el.value === val).map(el => el.index);
    if (acc.hasOwnProperty(currIndex)) {
      acc[currIndex] = arr.filter((el) => el.value === val);
    } else {
      Object.assign(acc, { [0]: [idx] });
    }
    return acc;
  }, {});
};

console.log(getGroupBy(data));

The expected output from my code is :

{
    0: [1,3,5],
    1: [2,6,7]
}

javascript filter reduce

Answer 1

Answer №1

Do you think it would be more practical to key the arrays by their values instead of 0 and 1?

Here's a way to condense the code and either use 0/1 keys or keys based on the value:

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const indices = data.reduce((acc,{index,value}) => {
  (acc[value] ??= []).push(index);
  return acc;
},{})
console.log({...Object.values(indices)})
// or 
console.log(indices);

A different approach is suggested here

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const indices = data
  .reduce((acc,{index,value},i, arr) => {
    (acc[value] ??= []).push(index);
    return i < arr.length ? acc : {...Object.values(acc) }; // return the desired format at the end
  },{});

console.log(indices);

Answer 2

Do you think it would be more practical to key the arrays by their values instead of 0 and 1?

Here's a way to condense the code and either use 0/1 keys or keys based on the value:

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const indices = data.reduce((acc,{index,value}) => {
  (acc[value] ??= []).push(index);
  return acc;
},{})
console.log({...Object.values(indices)})
// or 
console.log(indices);

A different approach is suggested here

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const indices = data
  .reduce((acc,{index,value},i, arr) => {
    (acc[value] ??= []).push(index);
    return i < arr.length ? acc : {...Object.values(acc) }; // return the desired format at the end
  },{});

console.log(indices);

Answer 3

Answer №2

One approach could be to group and store the values in an object.

const
    data = [{ index: 1, value: "111" }, { index: 2, value: "121" }, { index: 3, value: "111" }, { index: 5, value: "111" }, { index: 6, value: "121" }, { index: 7, value: "121" }],
    result = Object.assign(
        {},
        Object.values(data.reduce((r, { index, value }) => ((r[value] ??= []).push(index), r), {}))
    );

console.log(result);

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

Answer 4

One approach could be to group and store the values in an object.

const
    data = [{ index: 1, value: "111" }, { index: 2, value: "121" }, { index: 3, value: "111" }, { index: 5, value: "111" }, { index: 6, value: "121" }, { index: 7, value: "121" }],
    result = Object.assign(
        {},
        Object.values(data.reduce((r, { index, value }) => ((r[value] ??= []).push(index), r), {}))
    );

console.log(result);

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

Answer 5

Answer №3

It is crucial to follow these steps for cleaner code:

{index: [value]}
{0: value}

This approach will greatly enhance the readability of your code.

  const data = [
    { index: 1, value: '111' },
    { index: 2, value: '121' },
    { index: 3, value: '111' },
    { index: 5, value: '111' },
    { index: 6, value: '121' },
    { index: 7, value: '121' },
  ];

  const getGroupBy = (data) => {
    return data.reduce((acc, curr) => {
      if (acc[curr.value]) acc[curr.value].push(curr.index);
      else acc[curr.value] = [curr.index];
      return acc;
    }, {});
  };
  console.log(getGroupBy(data));
  console.log({ ...Object.values(getGroupBy(data)) });

Answer 6

It is crucial to follow these steps for cleaner code:

{index: [value]}
{0: value}

This approach will greatly enhance the readability of your code.

  const data = [
    { index: 1, value: '111' },
    { index: 2, value: '121' },
    { index: 3, value: '111' },
    { index: 5, value: '111' },
    { index: 6, value: '121' },
    { index: 7, value: '121' },
  ];

  const getGroupBy = (data) => {
    return data.reduce((acc, curr) => {
      if (acc[curr.value]) acc[curr.value].push(curr.index);
      else acc[curr.value] = [curr.index];
      return acc;
    }, {});
  };
  console.log(getGroupBy(data));
  console.log({ ...Object.values(getGroupBy(data)) });

Answer 7

Answer №4

In my recent code snippet, I made use of the reduce function to manipulate data, with a slight alteration on the final iteration to achieve the desired result.

Utilizing this approach is quite handy in various scenarios where the end goal may only be reached during the last item iteration, signifying completion of processing all elements.

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const getGroupBy = (data) => {
  return data.reduce((acc, curr, index) => {
    const val = curr.value;
    const idx = curr.index;
    var key  = val;
     
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(idx);

     if (index == data.length-1) {
      return Object.values(acc).reduce((a,c, i)=> { a[i]=c; return a;}, {});
    }
    return acc;
  }, {});
};


console.log(getGroupBy(data))

Answer 8

In my recent code snippet, I made use of the reduce function to manipulate data, with a slight alteration on the final iteration to achieve the desired result.

Utilizing this approach is quite handy in various scenarios where the end goal may only be reached during the last item iteration, signifying completion of processing all elements.

const data = [
  { index: 1, value: "111" },
  { index: 2, value: "121" },
  { index: 3, value: "111" },
  { index: 5, value: "111" },
  { index: 6, value: "121" },
  { index: 7, value: "121" },
];

const getGroupBy = (data) => {
  return data.reduce((acc, curr, index) => {
    const val = curr.value;
    const idx = curr.index;
    var key  = val;
     
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(idx);

     if (index == data.length-1) {
      return Object.values(acc).reduce((a,c, i)=> { a[i]=c; return a;}, {});
    }
    return acc;
  }, {});
};


console.log(getGroupBy(data))

Minimize a collection of JavaScript objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using a JSON file as a variable in JavaScript

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

Issue experienced with Vue2 where utilizing a computed property to filter a nested v-for structure

How to align two <select> elements side by side using Bootstrap

Creating a task management application using AXIOS and VUE for easy data manipulation

Extracting information from ul li div elements and saving it in JSON format

Utilizing Ajax for Dynamically Filling a Dropdown Menu

retrieve data from jsp page using ajax request

Tips for adding an asterisk to the label of a Material-UI switch component

What does getsession.insert in the Ace Editor return?

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

The browser automatically adds a backslash escape character to a JavaScript object

Failed to cast value "undefined" to ObjectId in the "_id" path for the model "User"

Transmit updated value to masterpage upon selection alteration

What is the best method for selecting only files (excluding folders) in Gulp?

Is there a way to segment a string into words using a dictionary and finding the longest match in JS/Jquery?

Utilizing PHP to dynamically generate href links based on radio button selection in real-time interaction with JavaScript

Implementing a Popover Notification When Clicked

Show categories that consist solely of images

Using ReactJS to Deconstruct Data within Class Components