Jer'Maine Montiel Jer'Maine Montiel - 6 months ago 13
AngularJS Question

Error building two arrays in AngularJS, kinda weird

So I'm building an app in AngularJS. I've got two arrays being filled from http requests, from JSON files (these files will be able to be updated at any time; one list is pretty much constant, the other would be changed more frequently). I made a method for doing the http request in a service module.

angular.module('vrApp')
.service('aircraftLists', function( $http ) {

//gets aircraft list
this.getACList = function( path, callback ) {
$http.get(path).then(callback)
}
});


Then in the controller I call the method twice, for each JSON file I have, in the callback I build the links, put them in an object, and put the object in an array.

'use strict';

var acObj = {
name: '',
latestUrl: '',
mtmUrl: '',
oaUrl: ''
};

angular.module('vrApp')
.controller('mainCtrl', function( $scope, aircraftLists ){

$scope.currACList = [];
$scope.allACList = [];

aircraftLists.getACList('../data/ac.json', function( resp ) {

var aac = acObj;
//loop through list, put in allACList
for( var j = 0; j < resp.data.length; j++ )
{
aac.name = resp.data[j];
aac.latestUrl = "PDM/" + aac.name + "/currlinkindex.htm";
aac.mtmUrl = "PDM/" + aac.name + "/index.htm";
aac.oaUrl = "OA/" + aac.name + "/index.htm";
$scope.allACList[j] = aac;

console.log( $scope.allACList[j] ); //checking the contents of the object in the array
console.log( aac ); //checking the object variable

//clear data from the object
aac = {
name: '',
latestUrl: '',
mtmUrl: '',
oaUrl: ''
};
}

console.log( $scope.allACList );

});

aircraftLists.getACList('../data/current.json', function( response ) {

var cac = acObj;
//loop through list, put in currACList
for( var i = 0; i < response.data.length; i++ )
{
cac.name = response.data[i];
cac.latestUrl = "PDM/" + cac.name + "/currlinkindex.htm";
cac.mtmUrl = "PDM/" + cac.name + "/index.htm";
cac.oaUrl = "OA/" + cac.name + "/index.htm";
$scope.currACList[i] = cac;

console.log( $scope.currACList[i] ); //checking the contents of the object in the array
console.log( cac ); //checking the object variable

//clear data from the object
cac = {
name: '',
latestUrl: '',
mtmUrl: '',
oaUrl: ''
};
}

console.log( $scope.currACList );

});

});


And it works.. except that, looking at the console logs to verify, I'm getting an error where the first item in the second list is also the first item in the first array. Basically, given two lists [abc, def, ghi] and [jkl, mno, pqr], array1 would have a .name property of "jkl" instead of "abc"; every other object is how it should be.

I'm stumped. What could be the issue here? I went so far as to log the object after it's been filled and after it's added to the array. They both give me the correct values.

Don Don
Answer

This is because, you are creating reference to same object twice . var aac = acObj is used in both service calls. So in second call when u modify acc object, you are modifying value in $scope.allACList and $scope.currACList.

I would suggest you use clean copy method. Just create temporary object when needed and push it.

For example:

 aircraftLists.getACList('../data/ac.json', function( resp ) {

        //var aac = acObj; This line is not necessary
        var temp = {};   

        //loop through list, put in allACList
        for( var j = 0; j < resp.data.length; j++ )
        {
            temp.name = resp.data[j];
            temp.latestUrl = "PDM/" + aac.name + "/currlinkindex.htm";
            temp.mtmUrl = "PDM/" + aac.name + "/index.htm";
            temp.oaUrl = "OA/" + aac.name + "/index.htm";
            $scope.allACList[j] =JSON.parse(JSON.stringify(temp))); \\ use clean-copy 

            console.log( $scope.allACList[j] ); //checking the contents of the object in the array
            //console.log( aac ); //checking the object variable - This is not needed

            //clear data from the object - This is not needed
            //aac = {
            //name: '',
           // latestUrl: '',
           // mtmUrl: '',
           // oaUrl: ''
            //};
        }