Angular Array Splice and Push not working

Question

I have a strange issue, I am using a dataview so when I add items to the array is not pushing to the array. i used chrome developer tool to confirm that nothing is being pushed to the array.

HTM (just showing the checkboxed for simplicity)

      <p-dataView [value]="iErsaPreviewApps" [paginator]="true" [rows]="20" [sortField]="sortField" [sortOrder]="sortOrder" paginatorPosition="both">
         <ng-template let-prev pTemplate="listItem">
             <input type="checkbox" id="cbPreviewID" checked name="cbxPreview" (click)="togglePreviewApp($event)" style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px" [value]='prev.app_id'> {{prev.app_name}}
       </ng-template>
     </p-dataView>

interface

export interface IErsaApps {
        app_id: number;
        app_type_id: number;
        app_name: string;
        app_roles: string;
        app_sort_id?: number;
       roles: Array<IErsaAppRoles>
}
export interface IErsaAppRoles {
    app_role_id: number;
    app_role_app_id: number;
    app_role_name: string;
    app_role_sort_id?: number;
}

Service

getErsaApps(): Observable<IErsaApps[]> {
        return this._http.get(environment.BASE_API_URL + 'xxxxxx')
            .map((response: Response) => <IErsaApps[]>response.json())
            .catch(this.handleError);
    }

TS

iErsaAppList: IErsaApps[] = []; 
    selectedObject: IErsaApps; 
    selectedPreviewObject: IErsaApps; 
    iErsaDeafultApps: IErsaApps[] =[]; 
    iErsaPreviewApps: IErsaApps[]=[]; 
    iErsaSelectedApps: IErsaApps[] = null; 
 ngOnInit() {
 this.GetErsaApps();
}
 GetErsaApps() {
        this._ersaDet.getErsaApps()
            .subscribe(
            data => {
            this.iErsaDefaultApps = data;
            this.iErsaAppList = data.map(item => item);      },
       }
       togglePreviewApp(event: any) {
        if (this.iErsaAppList != undefined) {
              this.selectedPreviewObject = this.iErsaAppList
                .find(x => x.app_id == event.srcElement.value);
            const index: number = this.iErsaPreviewApps.indexOf(this.selectedPreviewObject);
            this.iErsaDeafultApps.push(this.selectedPreviewObject);
        }
    }

When you post a lot of code formatted like this many, including myself, don't bother to even read it. Please [edit] your question and format your code so it is legible unless you do not want others to read it in which case just omit it completely. — Igor, Dec 04 '18 at 18:19
thanks or the tips, removed my html and cleaned my code removed spaces and console.logs — rgoal, Dec 04 '18 at 18:32
@rgoal As far as I can see from your code it looks like your are not getting any rows in the table in the first place, it is showing empty from start. Am I correct? Are you seeing any rows? — benshabatnoam, Dec 06 '18 at 19:23
strange, used chrome developer tool to confirm that nothing is being pushed to the array, however, this.selectedPreviewObject has values — rgoal, Dec 06 '18 at 19:24
OMG, it is added but at the end of the array ...so just the sorting is not working...just need the row to be added at the same place at before — rgoal, Dec 06 '18 at 19:35
I can't see any sorting in the code you've added to your question — benshabatnoam, Dec 06 '18 at 19:42
got it working just needed to replace the push with const originalIndex: number = this.iErsaAppList.indexOf(this.selectedPreviewObject); this.iErsaDefaultApps.splice(originalIndex, 0, this.selectedPreviewObject); — rgoal, Dec 06 '18 at 19:44
basically just needed to insert into the array using a specific index — rgoal, Dec 06 '18 at 19:45
thanks for directing me to the right path... was sooo blind ..feel stupid :( — rgoal, Dec 06 '18 at 19:46
I have thousands of row and it was just adding the row at the end. — rgoal, Dec 06 '18 at 19:47

score 2 · Accepted Answer · answered Dec 04 '18 at 18:43

2

Pretty sure this line is your problem, where you do an Object.assign to an array :

this.iErsaAppList = Object.assign([], this.iErsaDeafultApps); },

I tried this in my console like so:

const obj = {a:'a'};
const result = Object.assign([],obj);
// result -> [a: "a"]
// Try to access properties of array.
const item = result[0]; // undefined

I'm not really sure what's happening with that result array, but it doesn't look like anything I'm used to seeing. I don't know what your response looks like from that fetch, but assuming it's an array you probably want some code like this when it receives data.

 this._ersaDet.getErsaApps()
        .subscribe(data => {
           this.iErsaApp.list = data.map(item=> item);  // map response to new array
});

answered Dec 04 '18 at 18:43

chairmanmow

649
7
20

Then maybe your code has multiple issues. Just saying that so you can improve your question, not to be rude. You should work in small steps and isolate the issue to what it is that isn't working in you grand plan, work on small parts. If your code was well formatted I may be more inclined to take a look, but not likely. If your code was in an interactive code snippet that illustrated the issue and could be solved for in browser - I'd be way more inclined. I'd take a shot at it. As it stands though for this, I'm off it for now. This isn't really a proper s/o question at this point – chairmanmow Dec 04 '18 at 23:52
I'm likely to get downvoted for my answer now, because it doesn't apply to the question anymore. in fact, I'm going to downvote this question now until I like how it looks. – chairmanmow Dec 04 '18 at 23:54
i reformatted my code and tried to make it simple as well as isolating the issue...it is from GetErsaApps() method – rgoal Dec 05 '18 at 17:14
any help please :) – rgoal Dec 06 '18 at 18:42
1

i figured it out...It was there but all the way at the end...I have thousands of row and it was just adding the row at the end. – rgoal Dec 06 '18 at 19:47

Angular Array Splice and Push not working

1 Answers1