Combine the common id field from two distinct arrays in AngularJS

Question

Combine the common id field from two distinct arrays in AngularJS

I have two distinct arrays of data objects, each containing multiple fields: https://i.stack.imgur.com/tMM4l.png https://i.stack.imgur.com/ScgPh.png Here is an example of the data object array with the inclusion of the eventId field.

https://i.stack.imgur.com/21Vbv.png

The annotateData object also contains a eventId field that corresponds with those in the data object. I aim to identify which data element shares the same eventId as found in the annotateData, and then combine the respective annotateData element with the corresponding data object element. Consequently, the output will consist of a data object with augmented annotateObject fields.

data: [{
  0:{ annotateData fields + existing data fields} //if eventId matches
}]

Is there a more efficient approach to achieve this without iterating through the entire data object?

javascript arrays angularjs

Answer 1

Answer №1

Utilizing a loop seems like the most effective approach for this task. However, incorporating some helper methods to simplify the process is beneficial. One such example can be found here:

Array.prototype.indexOfWithKeyValue = function(key, value) {
  var index = -1;
  var _this = this;

  for (var i = 0; i < this.length; i++) {
    var item = _this[i];
    if (item[key] === value) {
      index = i;
      break;
    }
  }

  return index;
};

Array.prototype.find = function(key, value) {
  var index = this.indexOfWithKeyValue(key, value);
  return this[index];
};

To further streamline the process:

var annotateData = [];  // example data
var data = [];  // example data

angular.forEach(annotateData, function(aData) {
    var matchingData = data.find("eventId", aData.eventId);

    if (matchingData) {
        // Merge relevant fields from "annotateData" into "data"
        angular.merge(matchingData, aData);
    }
});

Answer 2

Utilizing a loop seems like the most effective approach for this task. However, incorporating some helper methods to simplify the process is beneficial. One such example can be found here:

Array.prototype.indexOfWithKeyValue = function(key, value) {
  var index = -1;
  var _this = this;

  for (var i = 0; i < this.length; i++) {
    var item = _this[i];
    if (item[key] === value) {
      index = i;
      break;
    }
  }

  return index;
};

Array.prototype.find = function(key, value) {
  var index = this.indexOfWithKeyValue(key, value);
  return this[index];
};

To further streamline the process:

var annotateData = [];  // example data
var data = [];  // example data

angular.forEach(annotateData, function(aData) {
    var matchingData = data.find("eventId", aData.eventId);

    if (matchingData) {
        // Merge relevant fields from "annotateData" into "data"
        angular.merge(matchingData, aData);
    }
});

Combine the common id field from two distinct arrays in AngularJS

Answer №1

Similar questions

Javascript tree structures that enable the drag-and-drop of multiple items

When using props.onChange(e.target.value) in a textField component in Material UI, it unexpectedly returns an object instead of a value

Angular: Choose the label of the currently selected option

Storing HTML values in a Meteor database is a common practice for web

The useEffect function is failing to execute, leading to an issue with an undefined variable

Nuxt and Express server are unable to receive API requests when in production mode and the /dist directory

Unable to display bar chart on PHP webpage showing database number volumes using JavaScript

Incorporate the key as a prop within a Child Component in a React application

String casting for large JavaScript integers may require rounding to function properly

Altering the appearance of an input field upon submission

Using $.getJSON is not functioning properly, but including the JSON object directly within the script is effective

Server Error: Reactjs doesn't support posting images

Getting elements in order with bootstrap

AJAX seems to be struggling to recognize JSON data as JSON format

Tips for assigning information from a react hook within a function or event

The 'ObjectID' property is not present in the 'CollectionStatic' data type

Incorporate a fresh key-value pair into the Redux Toolkit's state

Creating a series of images in JavaScript using a for loop

Can we improve the coding of this as it seems inefficient and uses up too much room?

CSS file not loading in an ExpressJS application