Merge objects with different values using Angularj

Question

I'm trying to merge two objects into a single multidimensional object for use in Angularjs controller by the 'unique_id'. (Note I also have Underscore Js added in).

Object #1 example:

[ 
  { "unique_id": "001", "title": "Putting Green Challenge - Motion Depends on Force and Mass" }, 
  { "unique_id": "002", "title": "Molecules to Organisms: Frog Life Cycle" }
]

Object #2 example (has MANY more rows than object 1..):

[
  {

   "ab_id": "76153F02-29F3-11D8-95EA-951BF95D9AEF",
   "unique_id": "001",
   "title": "How Speed Relates to Energy",
   "state": "NY",
   "document_title": "Core Curriculum",
   "grade_code": "K-4",
   "grade_descr": "Elementary",
   "state_id": "1.S2.3a",
   "state_text": "Use appropriate \"inquiry and process skills\" to collect data"

},
{

  "ab_id": "7980A762-29F3-11D8-BD14-861D7EA8D134",
  "unique_id": "001",
  "title": "How Speed Relates to Energy",
  "state": "NY",
  "document_title": "Core Curriculum",
  "grade_code": "5-8",
  "grade_descr": "Intermediate",
  "state_id": "1.S3.2d",
  "state_text": "formulate and defend explanations and conclusions as they relate to scientific phenomena"

}
]

My Controller:

abApp.controller("abEE", function(abService, $http, $scope, $q, _) {
  var abApp = this;

  $scope.abData = $http.get('/data/ab_activities.json', {
    cache: false
  });
  $scope.eeData = $http.get('/activities/eedata', {
    cache: false
  });

  $q.all([$scope.eeData, $scope.abData]).then(function(values) {
    var val = ??? This is where I want to merge the objects into one big multidimensional object..
});

Here is the output of console.dir(values);

0  Object { data=[28], status=200, config={...}, more...}
1  Object { data=[743], status=200, config={...}, more...}

This is the desired output I'd like to try and get:

[
  { "unique_id": "001", "title": "Putting Green Challenge - Motion Depends on Force and Mass", "alignments": [{"ab_id": "76153F02-29F3-11D8-95EA-951BF95D9AEF","unique_id": "001","title": "How Speed Relates to Energy",...}, {"ab_id": "7980A762-29F3-11D8-BD14-861D7EA8D134", "unique_id": "001", "title": "How Speed Relates to Energy",...}]
]

Answer 1

I don't think angular or underscore have this kind of functionality. I would do something like the following pseudo-code:

tempObject = {}
for object in objectArray
  if tempObject[object.unique_id] isnt undefined
    tempObject[object.unique_id] = object
  else angular.extend(tempObject[object.unique_id], object) // or the other way around depending on your preference
resultingArray = []
for object, key of tempObject
  resultingArray.push(object)

You will have to run the for object in objectArray for both the returned arrays but that should work and is probably more efficient than most merge algorithms as at most it will loop through each returned arrays twice.

Answer 2

Edit

after you updated the question, i created this plunker

hopes it's what you meant

---

To merge all objects by unique_id

var unions = {};

$q.all([$scope.eeData, $scope.abData]).then(function(values) 
    {
        for (var i = 0; i< values.length; i++)
        {
            var value = values[i];


            if (!unions[value.unique_id])
            {
                unions[value.unique_id] = {};
            }

            angular.extend(unions[value.unique_id], value);
        }
    });

// Do somthing with 'unions'
...

Answer 3

If you could switch to use lodash instead of underscore, it can be achieved like this:

var val = _.values(_.merge(_.indexBy(values[0].data, 'unique_id'), _.indexBy(values[1].data, 'unique_id')));

The underscore doesn't have _.merge(), you have to loop through each property without it.