Merge objects with different values using Angularjs or Underscore js

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",...}]
]

@Miraage - good suggestion!, I've really not gotten into using plunker or fiddle yet but I will try moving forward, thanks :-) — sstrycker
– sstrycker, Commented Jul 31, 2014 at 16:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Edit

after you updated the question, i created this plunker

hopes it's what you meant

enter image description here

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'
...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 31, 2014 at 4:34

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sstrycker Over a year ago

I like this - keeping it all "Angular" but when I did console.log(unions); it only returns the value[1] object...

sstrycker Over a year ago

Yes they do Jossef, but there are many values in values[1] as opposed to values[0] which only has one 'unique_id' per row or record... so in database terms I guess I'm trying to do a 'one to many' relationship...

Jossef Harush Kadouri Over a year ago

@sstrycker - i'm confused. it will be very helpful if you edit the question and provide before & after examples. as far as i understood from your last comment, seems like you are talking about grouping values by unique_id..

sstrycker Over a year ago

I just added my desired output to the bottom of my question.. sorry for the confusion!

sstrycker Over a year ago

Thank you Jossef, this is also close :-) But I need to have object 1 the main object and object 2's embedded into each corresponding object 1's....

|

runTarm · Accepted Answer · 2014-07-31 18:01:47Z

1

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.

edited Jul 31, 2014 at 18:01

answered Jul 31, 2014 at 6:25

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

5 Comments

sstrycker Over a year ago

I've tried this and console.log(val); just returns an ["ok"] :-/

runTarm Over a year ago

What does the values variable look like, try running console.dir(values) and include it in your question.

sstrycker Over a year ago

I've added that to my question.

runTarm Over a year ago

I see, your data is in .data, I have updated the answer, please try running it again.

sstrycker Over a year ago

I think it' getting close now, I do get a return of 28 objects now but only ONE value from values[1] is being merged into each of the values[0] and I didn't want to merge I wanted to "add into" values from values[1] where unique_id matched. I will update my answer with the desired output I'm looking for...

Simeon Cheeseman · Accepted Answer · 2014-07-31 04:24:27Z

0

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.

answered Jul 31, 2014 at 4:24

Simeon Cheeseman

1,7681 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Merge objects with different values using Angularjs or Underscore js

3 Answers 3

Edit

6 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit

6 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related