why is http delete request not deleting the item

Question

The dropdown service calls the http delete service which gets the id from the data in the firebase server. and then sets that id to the property idArr in http service. then that id is used to delete the database entry. but its not working.

I was expecting the {data.id[0]} field in the database to be deleted but its not being deleted

No errors were thrown

// drop down service

import { Injectable } from '@angular/core';
import { ICourseModel } from '../interface/course-model';
import { HttpPostService } from './http-post.service';
import { HttpGetService } from './http-get.service';
import { HttpDeleteService } from './http-delete.service';


@Injectable()
export class DropDownService {
  courses: ICourseModel[] = [
    { course: 'Mobile Development' },
    { course: 'Web Development' },
    { course: 'IOS Development' },
    { course: 'Android Development' }
  ];
  id: string[];
  coursesDt: any = this.httpGet.getData();


  private setDt() {
    this.httpSer.storeData(this.courses).subscribe(
      (response) => { console.log(response); },
      (error) => { console.log(error); });
  }

  private getDt() {
    this.httpGet.getData().subscribe(
      (response) => { this.coursesDt = response; },
      (error) => { console.log(error); });
  }

  getData() {
    return this.courses;
  }

  setData(obj: { course: string }) {
    this.courses.unshift(obj);
  }
  constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) {
    this.setDt();
    // this.getDt();
    console.log(this.coursesDt);
    this.dlt.gtData().then(id => { this.dlt.idArr.push(...id); });
    this.dlt.removeDt().then(() => console.log('ran'));
  }
}

// http delete service

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class HttpDeleteService {
  idArr = [];
  public baseUrl = '';

  constructor(private http: Http) {
    console.log(this.idArr);
  }

  gtData() {
    return this.http.get(`${this.baseUrl}/data.json`)
      .toPromise()
      .then(response => this.convert(response.json()));
  }

  convert(pasrsedResponse) {
    return Object.keys(pasrsedResponse).map(
      id => (id)
    );
  }

  removeDt() {
    return this.http.delete(`${this.idArr[0]}.json`).toPromise();
  }
}

// app component

ngOnInit() {
    // form controls validation specicified in the class for the Reactive Forms
    this.courseForm = this.fb.group({
      username: [null, [Validators.required, Validators.pattern(/^[a-z0-9_-]{3,16}$/)]],
      email: [null, [Validators.required, Validators.pattern('([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\\.([a-zA-Z]{2,5})')]],
      address: [null, [Validators.required, Validators.minLength(10), Validators.maxLength(100)]],
      date: [null, [Validators.required]],
      select: [null, [Validators.required]]
    });
    // passing the observable to the variable which then uses async pipe
    this.route.data.subscribe((data: Data) => { this.coursesDp = data['course']; });


    this.personDetail = this.fieldData.getPersonData();
  }

}

Answer 1

Try this. Its looks there is an issue in your services which doesn't return the promise or observable.

import { Injectable } from '@angular/core';
import { ICourseModel } from '../interface/course-model';
import { HttpPostService } from './http-post.service';
import { HttpGetService } from './http-get.service';
import { HttpDeleteService } from './http-delete.service';


@Injectable()
export class DropDownService {
  courses: ICourseModel[] = [
    { course: 'Mobile Development' },
    { course: 'Web Development' },
    { course: 'IOS Development' },
    { course: 'Android Development' }
  ];
  id: string[];
  coursesDt: any = this.httpGet.getData();

  constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) {
    // Then or subscribe cannot be attached here
    // Since this function doesn't return any promise or observable
    //this.setDt();

    // So take a look here we are calling another service in subscribe block.
    // I'm sorry I have to write this promise chain which looks ugly and mess.
    // Since your services are already in this way so I have to do it for simplicity 
    // and to be on the point.
    this.httpSer.storeData(this.courses)
      .map(resp => resp.json())
      .subscribe(resp => {
        this.httpGet.getData()
          .map(resp => resp.json())
          .subscribe(response => {
            this.coursesDt = response;
            this.dlt.removeDt().then(() => console.log('ran'));
          });
      });
  }
}

Answer 2

The problem with your code is that it is asynchronous. It boils down to:

constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) {
    this.httpSer.storeData(this.courses);
    this.dlt.http.get('... url1 ...');
    this.dlt.http.delete('... url2 ...');
}

All these requests will be executing in parallel and there's no way to tell the order in which they will really be executed. So, when delete() gets run idArr is still empty. You need to chain calls in order to wait on the promise for the previous call has finished and only then start next call, something like this (code is not tested, just the idea):

constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) {
    this.setDt().then(() => {
        this.dlt.gtData().then(id => { this.dlt.idArr.push(...id); }).then(() => {
            this.dlt.removeDt().then(() => console.log('ran'));
        })
    });
}