objec is null in Chrome and not null in IE

Question

I have very very strange issue that I can't figure out, when using "Chrome" my object sometimes becomes null but in IE it always works. It happens only for all my drop downs,however, other control like textbox are working as expected...here is a simplified version of my code.

note: dropdrown is binding correctly, so the values are available in the html

HTML (Using Reactive forms)

     <label for="costCenterId" class="control-label">Cost Center</label>

    <p-dropdown [options]="iCostCenter" optionLabel="cost_center_name"  styleClass="form-control"
 formControlName="costCenter" id="costCenterId" name="costCenter" dataKey="cost_center_id"
          [filter]="true" filterBy="value.cost_center_name">
 </p-dropdown>

TS

    export interface ICostCenter{

        cost_center_id: number,
        cost_center_name: string
    }

    iCostCenter: ICostCenter[]=[];

    ngOnInit() {
     this.getAllCostCenetrs();
this.populateHeaderDet();

    }

    getAllCostCenetrs() {
            this._appParams.getAllCostCenters()
                .subscribe(
                data => {
                    this.iCostCenter = data.result;


                },
               error => 'GetAllCostCenetrs Method: ');

        }

populateHeaderDet() in chrome iCostCenter become null
    {
    this.ersaForm.patchValue({

                   costCenter: this.iCostCenter.find(cc => cc.cost_center_name === this.iRequest.costCenter.cost_center_name)

)};

JSON

{
  "result": [
    {
      "cost_center_id": 1,
      "cost_center_name": "1"
    },
    {

      "cost_center_id":2,
      "cost_center_name": "2"
    }
   ]
}

try calling `this.getAllCostCenetrs(); this.populateHeaderDet()` in `ngOnChanges` instead of `ngOnInit` — kinny94, Mar 19 '19 at 15:59

Darren Lamb · Accepted Answer · 2019-03-20T16:39:12.790

1

I would assume it's because iCostCenter is populated inside your subscription and populateHeaderDet() is being called before the response comes back from getAllCostCenters().

Try calling populateHeaderDet() after you assign iCostCenter instead

ngOnInit() {
    this.getAllCostCenetrs();
}

getAllCostCenetrs() {
    this._appParams.getAllCostCenters().subscribe(
        data => {
            this.iCostCenter = data.result;
            this.populateHeaderDet();
            },
            error => 'GetAllCostCenetrs Method: ');
    }

populateHeaderDet()
{
    this.ersaForm.patchValue({
               costCenter: this.iCostCenter.find(cc => cc.cost_center_name === this.iRequest.costCenter.cost_center_name)
)};

Edit

From the comments it sounds like what you actually want to do is wait for muliple observables to complete before you call the populateHeaderDet() method. One approach to solving this would be to use the rxjs zip method.

As I haven't seen the rest of your code then it's difficult to say for sure but you could try something like this

const costCentres$ = this._appParams.getAllCostCenters();
const companyCodes$ = this._appParams.getAllCompanyCodes()

zip(
 costCentres$,
 companyCodes$,
 (costCentres: string[], companyCodes: string[]) => ({costCentres, companyCodes}))
 .subscribe(data => {
   this.iCostCenter = data.costCentres;
   this.companyCodes = data.companyCodes;

   this.populateHeaderDet()
 });

edited Mar 20 '19 at 16:39

answered Mar 19 '19 at 15:56

Darren Lamb

1,535
14
18

that does not work either, Since the issue is random and not consistent it has do with timing. in other words this.getAllCostCenetrs() does not finish lading sometimes. so how would i force it to check if this.getAllCostCenetrs() done loading then call populateHeaderDet() – rgoal Mar 19 '19 at 20:16
sorry, i did not said what I wanted previously ...your solution will work but How can I use an abrovable to check if it was finished or not – rgoal Mar 19 '19 at 21:39
@rgoal im sorry, Im not sure what you're asking? – Darren Lamb Mar 20 '19 at 09:21
sorry for the confusion is there another way to do this. in my real code I have 6 dropwdown then this.populateHeaderDet(); is called, which makes it a bit messy to have it within subscribe. So in my case I will need to call one dropdpwn at a time from subscribe ...does it make sense! – rgoal Mar 20 '19 at 15:04
so basically i will need to call the dopwdown b from within subscribe of dropwdown a..then i will have to call drowdown c from subscribe method of droodown b etc...so basically just trying to figure out if there is a better way of doing this – rgoal Mar 20 '19 at 15:06
@rgoal i've updated the answer with what I hope is what you want. – Darren Lamb Mar 20 '19 at 16:39

objec is null in Chrome and not null in IE

1 Answers1

Edit