What is the best way to transform an array of objects in JavaScript?

Question

What is the best way to transform an array of objects in JavaScript?

I'm working with an array of objects that I need to transform into a table by pivoting the data. In other words, I am looking to generate a new array of objects with unique titles and nested arrays of key-value pairs. Can someone please assist me in achieving this task? Below, you'll find the original array and the desired array:

Original Array:

[
{title: "Title1", value1: "value1", value2: "value2"},
{title: "Title2", value1: "value1", value2: "value2"},
{title: "Title1", value1: "value1", value2: "value2"},
{title: "Title3", value1: "value1", value2: "value2"},
{title: "Title2", value1: "value1", value2: "value2"},
{title: "Title1", value1: "value1", value2: "value2"},
{title: "Title3", value1: "value1", value2: "value2"},
{title: "Title1", value1: "value1", value2: "value2"},
]

Desired result:

[
{title: "Title1", values: [{value1: "value1"}, {value2: "value2"}]},
{title: "Title2", values: [{value1: "value1"}, {value2: "value2"}]},
{title: "Title3", values: [{value1: "value1"}, {value2: "value2"}]},
]

Thank you in advance for any help or suggestions.

javascript arrays

Answer 1

Answer №1

Using a simple array reduce function can be beneficial in this scenario.

let info = [{
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title2",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title3",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title2",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title3",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}];

let transformedData = info.reduce((prev, current) => {
  let existingItem = prev.find(item => item.title === current.title);

  if (existingItem)
    existingItem.values.push(current)
  else
    prev.push({
      title: current.title,
      values: [current]
    });

  return prev;
}, []);

console.log(transformedData);

Resources Utilized

Reduce function

Find method

This method can be adjusted to pivot based on any field specified, with the inclusion of error handling for cases where the field does not exist:

let pivotByField = (key, info) => info.reduce((prev, current) => {
  let existingItem = prev.find(item => item[key] === current[key]);

  if (existingItem) {
    existingItem.values.push(current);
  } else {
    let newEntry = {
        values: [current]
    }

    newEntry[key] = current[key];

    prev.push(newEntry);
  }

  return prev;
}, []);

UPDATE I misunderstood the desired output format initially, but the reduce function can be adjusted to meet that requirement.

Answer 2

Using a simple array reduce function can be beneficial in this scenario.

let info = [{
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title2",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title3",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title2",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title3",
  value1: "value1",
  value2: "value2"
}, {
  title: "Title1",
  value1: "value1",
  value2: "value2"
}];

let transformedData = info.reduce((prev, current) => {
  let existingItem = prev.find(item => item.title === current.title);

  if (existingItem)
    existingItem.values.push(current)
  else
    prev.push({
      title: current.title,
      values: [current]
    });

  return prev;
}, []);

console.log(transformedData);

Resources Utilized

Reduce function

Find method

This method can be adjusted to pivot based on any field specified, with the inclusion of error handling for cases where the field does not exist:

let pivotByField = (key, info) => info.reduce((prev, current) => {
  let existingItem = prev.find(item => item[key] === current[key]);

  if (existingItem) {
    existingItem.values.push(current);
  } else {
    let newEntry = {
        values: [current]
    }

    newEntry[key] = current[key];

    prev.push(newEntry);
  }

  return prev;
}, []);

UPDATE I misunderstood the desired output format initially, but the reduce function can be adjusted to meet that requirement.

Answer 3

Answer №2

You can utilize a hash table to group data using thisArg in conjunction with Array#forEach.

var data = [{ title: "Title1", value1: "value1", value2: "value2" }, { title: "Title2", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }, { title: "Title3", value1: "value1", value2: "value2" }, { title: "Title2", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }, { title: "Title3", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }],
    grouped = [];

data.forEach(function (item) {

    // check if title is not in hash table
    if (!this[item.title]) {

        // if not, create new object with title and values array
        // and assign it with the title as hash to the hash table
        this[item.title] = { title: item.title, values: [] };

        // add the new object to the result set, too
        grouped.push(this[item.title]);
    }

    // create a new object with the other values and push it
    // to the array of the object of the hash table
    this[item.title].values.push({ value1: item.value1, value2: item.value2 });
}, Object.create(null)); // Object.create creates an empty object without prototypes

console.log(grouped);

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

Answer 4

You can utilize a hash table to group data using thisArg in conjunction with Array#forEach.

var data = [{ title: "Title1", value1: "value1", value2: "value2" }, { title: "Title2", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }, { title: "Title3", value1: "value1", value2: "value2" }, { title: "Title2", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }, { title: "Title3", value1: "value1", value2: "value2" }, { title: "Title1", value1: "value1", value2: "value2" }],
    grouped = [];

data.forEach(function (item) {

    // check if title is not in hash table
    if (!this[item.title]) {

        // if not, create new object with title and values array
        // and assign it with the title as hash to the hash table
        this[item.title] = { title: item.title, values: [] };

        // add the new object to the result set, too
        grouped.push(this[item.title]);
    }

    // create a new object with the other values and push it
    // to the array of the object of the hash table
    this[item.title].values.push({ value1: item.value1, value2: item.value2 });
}, Object.create(null)); // Object.create creates an empty object without prototypes

console.log(grouped);

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

Answer 5

Answer №3

    var originalArray = [
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title2", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title3", value1: "value1", value2: "value2"},
      {title: "Title2", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title3", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
    ];
    var newArray = [];

    for(var i = 0; i<originalArray.length; i++){
      var object = {};
      object.title=originalArray[i].title;
      var values = [];
      values.push({value1: originalArray[i].value1});
      values.push({value2: originalArray[i].value2});
      object.values= values;
      newArray.push(object);
    }

This code appears to be functional. However, the presence of duplicate titles in the original array may result in unintended behavior. If the duplications were intentional for demonstration purposes, then the code should work as intended. Otherwise, a different approach would be required to handle duplicate titles.

Answer 6

    var originalArray = [
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title2", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title3", value1: "value1", value2: "value2"},
      {title: "Title2", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
      {title: "Title3", value1: "value1", value2: "value2"},
      {title: "Title1", value1: "value1", value2: "value2"},
    ];
    var newArray = [];

    for(var i = 0; i<originalArray.length; i++){
      var object = {};
      object.title=originalArray[i].title;
      var values = [];
      values.push({value1: originalArray[i].value1});
      values.push({value2: originalArray[i].value2});
      object.values= values;
      newArray.push(object);
    }

This code appears to be functional. However, the presence of duplicate titles in the original array may result in unintended behavior. If the duplications were intentional for demonstration purposes, then the code should work as intended. Otherwise, a different approach would be required to handle duplicate titles.

What is the best way to transform an array of objects in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript - The left dropdown menu stubbornly remains visible when clicked in white space, unlike the right dropdown which disappears as expected. Puzzled by this inconsistency

What steps should I take to generate a stylized date input in javascript?

Utilize Vue to access and read a file stored in the current directory

Navigating between different route groups using redirection: a step-by-step guide

Steps for utilizing Bazel to compile TypeScript

Having trouble receiving the response from PHP after making an AJAX request

Define the position of a scrolled area within an HTML document to create a

Best method for reverting react-native to previous version

Utilizing Ajax to dynamically update the content of a div element

PHP query Ajax navigation

"Oops! Vite seems to be facing an issue as RefreshRuntime.injectIntoGlobalHook function is

Retrieving coordinates from an array

How can we stop the Replace function from replacing spaces as well?

Linking promises to eliminate nesting

Removing an element from an array of objects in Javascript

Press the smiley icon and drag it into the designated input box

Arranging a multidimensional array based on key value pairs in PHP

Searching for values in JSON using jQuery's autocomplete feature

Troubleshooting issues with jQuery `.live()` event not triggering as expected

Presenting a 24-column data table fetched from MySQL and integrated into a webpage through JavaScript DataTables