Why is angular extend function not combining two json objects - angularjs

Question

I have JavaScript vars so that I can view what is going on underneath the hood, so to say.
The first two vars are displaying their respective objects just fine, but not the third, which is using angular.extend to combine two json objects retrieved from two different databases. One is a local db and the other is from a production db.
The common id between the two json is what I am trying to "merge"
JSON 1:
[{"ID": 1, "TITLE": "CSR", "PHONE": "555-555-1212", "FNAME": "JOHN", "LNAME": "SMITH"}]
JSON 2:
[{"ID": 1, "GROUP_MEMBER_ID": "1","GROUP_MEMBER_TYPE_ID":"4","GROUP_ID":"1"}]
The result that I would like to see:
[{"ID": 1, "GROUP_MEMBER_ID": "1","GROUP_MEMBER_TYPE_ID":"4","GROUP_ID":"1", "TITLE": "CSR", "PHONE": "555-555-1212", "FNAME": "JOHN", "LNAME": "SMITH"}]
I have been trying to use angular.extend to no avail:
// local json objects to view result sets
var mLocalJson = {};
var mProdJson = {};
var mCombinedJson = {};
var teamApp = angular.module('teamApp', [])
teamApp.controller('mainController', function($scope, $http) {
$scope.documentsLocal = [];
$scope.documentsProd = [];
$scope.documentsCombined = [];
$scope.loadDataLocal = function () {
$http.post("php/getTeamsLocal.php")
.then(function(resultLocal) {
$scope.documentsLocal = resultLocal.data;
mLocalJson = resultLocal.data;
});
};
$scope.loadDataProd = function () {
$http.post("php/getTeamsProd.php")
.then(function(resultProd) {
$scope.documentsProd = resultProd.data;
mProdJson = resultProd.data;
});
};
$scope.loadDataCombined = function(){
mCombinedJson = angular.extend($scope.documentsCombined, $scope.documentsProd, $scope.documentsLocal);
};
});
I have tried a for loop. I have tried the following:
$scope.loadDataCombined = function(){
mCombinedJson = angular.extend($scope.documentsCombined, mProdJson, mLocalJson);
};
No matter what I have tried mCombinedJson is NULL

Answer 1

The API is not returning a JavaScript object. It is returning a JavaScript array with contents of one JavaScript object.
Use angular.extend to combine the objects inside the array.
var array1 = [{"ID": 1, "TITLE": "CSR", "PHONE": "555-555-1212", "FNAME": "JOHN", "LNAME": "SMITH"}];
var array2 = [{"ID": 1, "GROUP_MEMBER_ID": "1","GROUP_MEMBER_TYPE_ID":"4","GROUP_ID":"1"}];
var combinedArray = [angular.extend(array1[0],array2[0])];
console.log(combinedArray);
<script src="//unpkg.com/angular/angular.js"></script>

Answer 2

I used for loops to solve my issue:
$scope.loadDataProd = function () {
$http.post("php/getTeamsProd.php")
.then(function(resultProd) {
$scope.documentsProd = resultProd.data;
mProdJson = resultProd.data;
for (var i = 0; i < mLocalJson.length; i++) {
for (var j = 0; j < mProdJson.length; j++) {
if (mLocalJson[i].TEAM_ID == mProdJson[j].TEAMM_ID) {
mCombinedJson.push([{
"TEAM_GROUP_ID": $scope.documentsLocal[i].TEAM_GROUP_ID,
"TEAM_GROUP_MEMBER_ID": $scope.documentsLocal[i].TEAM_GROUP_MEMBER_ID,
"TEAM_GROUP_DESC": $scope.documentsLocal[i].TEAM_GROUP_DESC,
"TEAM_GROUP_MEMBER_TYPE_DESC": $scope.documentsLocal[i].TEAM_GROUP_MEMBER_TYPE_DESC,
"TEAM_ID": $scope.documentsProd[j].TEAMM_ID,
"TEAMM_DESC": $scope.documentsProd[j].TEAMM_DESC,
"TEAMM_EMAIL": $scope.documentsProd[j].TEAMM_EMAIL,
"TEAMM_EXTENSION": $scope.documentsProd[j].TEAMM_EXTENSION,
"TEAMM_EZLYNX_USERNAME": $scope.documentsProd[j].TEAMM_EZLYNX_USERNAME,
"TEAMM_FAX": $scope.documentsProd[j].TEAMM_FAX,
"TEAMM_NAME": $scope.documentsProd[j].TEAMM_NAME,
"TEAMM_PHONE": $scope.documentsProd[j].TEAMM_PHONE,
"TEAMM_QUEUE": $scope.documentsProd[j].TEAMM_QUEUE,
"TEAMM_QUEUE_GROUP": $scope.documentsProd[j].TEAMM_QUEUE_GROUP,
"TEAMM_QUEUE_KILLED": $scope.documentsProd[j].TEAMM_QUEUE_KILLED,
"TEAMM_QUEUE_SENT": $scope.documentsProd[j].TEAMM_QUEUE_SENT,
"TEAMM_TYPE": $scope.documentsProd[j].TEAMM_TYPE
}]);
}
}
}
});
};
$scope.loadDataCombined = function(){
setTimeout(function(){
for (var i = 0; i < mLocalJson.length; i++) {
for (var j = 0; j < mProdJson.length; j++) {
if (mLocalJson[i].TEAM_ID == mProdJson[j].TEAMM_ID) {
mCombinedJson.push([{
"TEAM_GROUP_ID": mLocalJson[i].TEAM_GROUP_ID, // 1 - 7
"TEAM_GROUP_MEMBER_ID": mLocalJson[i].TEAM_GROUP_MEMBER_ID,
"TEAM_GROUP_DESC": mLocalJson[i].TEAM_GROUP_DESC, // Cereal Killers, Guns n Closes, etc...
"TEAM_GROUP_MEMBER_TYPE_DESC": $scope.documentsLocal[i].TEAM_GROUP_MEMBER_TYPE_DESC, // Director, Manager, Assistant Manager, Producer
"TEAM_ID": mProdJson[j].TEAMM_ID,
"TEAMM_DESC": mProdJson[j].TEAMM_DESC,
"TEAMM_EMAIL": mProdJson[j].TEAMM_EMAIL,
"TEAMM_EXTENSION": mProdJson[j].TEAMM_EXTENSION,
"TEAMM_EZLYNX_USERNAME": mProdJson[j].TEAMM_EZLYNX_USERNAME,
"TEAMM_FAX": mProdJson[j].TEAMM_FAX,
"TEAMM_NAME": mProdJson[j].TEAMM_NAME,
"TEAMM_PHONE": mProdJson[j].TEAMM_PHONE,
"TEAMM_QUEUE": mProdJson[j].TEAMM_QUEUE,
"TEAMM_QUEUE_GROUP": mProdJson[j].TEAMM_QUEUE_GROUP,
"TEAMM_QUEUE_KILLED": mProdJson[j].TEAMM_QUEUE_KILLED,
"TEAMM_QUEUE_SENT": mProdJson[j].TEAMM_QUEUE_SENT,
"TEAMM_TYPE": mProdJson[j].TEAMM_TYPE
}]);
}
}
}
}, 300);
$scope.lDc();
};
$scope.lDc = function(){
$scope.documentsCombined = mCombinedJson;
};