Using JavaScript to transform an array of objects into a new array of different objects

Question

Using JavaScript to transform an array of objects into a new array of different objects

This issue has cropped up in various scenarios and programming languages, and I have always managed to find a workaround. However, I am now hoping to establish a proper pattern to address this problem once and for all. It typically arises when joining SQL tables. Instead of making separate calls for items and comments, I know there must be a way to retrieve all the information in a single call and then flatten the result.

My goal is to transform an array structured like this:

[
  {
    itemId: 1,
    comments: {
      commentId: 1
    }
  },
  {
    itemId: 1,
    comments: {
      commentId: 2
    }
  },
  {
    itemId: 2,
    comments: {
      commentId: 3
    }
  }
]

Into the following format:

[
  {
    itemId: 1,
    comments: [
      {
        commentId: 1
      },
      {
        commentId: 2
      }
    ]
  },
  {
    itemId: 2,
    comments: [
      {
        commentId: 3
      }
    ]
  }
]

javascript arrays design-patterns object

Answer 1

Answer №1

Here is a solution that should meet your needs:

function mergeArrayItems(arr) {
    var combinedObj = {};

    // Merge the comments
    for (var i=0; i < arr.length; i++) {
        if (combinedObj[arr[i].itemID]) {
            combinedObj[arr[i].itemID].push(arr[i].comments);
        } else {
            combinedObj[arr[i].itemID] = [arr[i].comments];
        }
    }

    // Create the final list
    var keys = Object.keys(combinedObj);
    return keys.map(function(key){return {itemID: key, comments: combinedObj[key]} })
}

Answer 2

Here is a solution that should meet your needs:

function mergeArrayItems(arr) {
    var combinedObj = {};

    // Merge the comments
    for (var i=0; i < arr.length; i++) {
        if (combinedObj[arr[i].itemID]) {
            combinedObj[arr[i].itemID].push(arr[i].comments);
        } else {
            combinedObj[arr[i].itemID] = [arr[i].comments];
        }
    }

    // Create the final list
    var keys = Object.keys(combinedObj);
    return keys.map(function(key){return {itemID: key, comments: combinedObj[key]} })
}

Answer 3

Answer №2

You also have the option to utilize the filter() method:

function combineData(data) {
    var dictionary = {};
    return data.filter(function(entry) {
        if (!dictionary[entry.id]) {
            entry.info = [entry.info];
            dictionary[entry.id] = entry;
            return true;
        } else {
            dictionary[entry.id].info.push(entry.info);
            return false;
        }
    });
}

Answer 4

You also have the option to utilize the filter() method:

function combineData(data) {
    var dictionary = {};
    return data.filter(function(entry) {
        if (!dictionary[entry.id]) {
            entry.info = [entry.info];
            dictionary[entry.id] = entry;
            return true;
        } else {
            dictionary[entry.id].info.push(entry.info);
            return false;
        }
    });
}

Using JavaScript to transform an array of objects into a new array of different objects

Answer №1

Answer №2

Similar questions

Can all anchor tags properties on a website be simultaneously changed?

Disable the ability to select text when double-clicking

Personalized design created using v-for

What is the best way to add checkbox functionality in React with both checked and unchecked states?

SDK for generating templates with JavaScript/jQuery

Is it possible to implement a setInterval on the socket.io function within the componentDidMount or componentDidUpdate methods

Configure your restify REST API server to handle both HTTPS and HTTP protocols

What are some ways to direct users from one page to another without relying on server-side programming?

I am curious about how to switch between different modes in order to change the appearance, functionality, and interaction of a program. Currently, I am exploring this

Having trouble with Fancybox loading images from an external URL?

JavaScript has a flaw in its date validation that allows for incorrect dates like 'dd.mm.0302' or '27.08.0974' to pass through

Ways to transfer a function as attributes from one functional element to another?

How can I notify a particular user using Node.js?

Reading cached JSON value in a Node.js application

Optimizing the performance of "document.createElement"

Adjust the ZIndex on a div through interactive clicking

What is the process for performing pattern matching on an array in Scala?

Transferring information between postponed functions

Accessing Child HTML Elements with VueJS2

Is there a way to determine if an app is installed on a phone using Javascript within Safari on iOS 9 or later?