TypeError: Cannot convert undefined or null to object in Ionic/Angular

Issue

I'm trying to setup a crypto currency live market price. But it's not displaying. I'm only seeing this error in my chrome developer console.

ERROR TypeError: Cannot convert undefined or null to object

mycomponent.ts

  ngOnInit() {
    this.refreshData();
  }

  refreshData(reset:boolean = false) {
    // Reset table index to 1
    if (reset) {
      this._data._previousIndex = 1;
    }

    // Set table page index and size to previous resevered data
    if (this._data._previousIndex !== null && this._data._previousPageSize !== null) {
      this._current = this._data._previousIndex;
      this._pageSize = this._data._previousPageSize;
      this._sortMap.name = this._data._previousSortMapName;
      this._sortMap.symbol = this._data._previousSortMapSymbol;
      //console.log("reserve data called");
    }

    this._loading = true;
    // Sort dataset before get
    if (this._sortName !== null || this._sortValue !== null) {
      this._data.sortData(this._sortName, this._sortValue);
      //console.log("sort method called");
    }

    this.cryData = [];
    this.cryptoLastPrices = [];
    this.cryptoPriceCompare = [];
    this.cryptoNames = this._data.getNamesFull();
    this.cryptoImages = this._data.getImagesFull();
    this._placeHolderSafe = this._sanitizer.bypassSecurityTrustUrl(this._placeholderBase64);

    this._data.getPricesFull()
      .subscribe(res => {
        this.receiveData = res.DISPLAY;
        //console.log(this.receiveData);

        let coinKeys: any = Object.keys(this.receiveData);
        let coinValues: any = Object.values(this.receiveData);

        // Price compare first time check
        if (this.cryptoLastPrices.length === 0) {
          for (let _i = 0; _i < coinKeys.length; _i++) {
            let _currentPrice = parseFloat((coinValues[_i].USD.PRICE).substring(2).replace(/,/g, ''));
            this.cryptoLastPrices[_i] = _currentPrice;
            this.cryptoPriceCompare[_i] = _currentPrice - this.cryptoLastPrices[_i];
          }
        } else {
          for (let _i = 0; _i < coinKeys.length; _i++) {
            this.cryptoPriceCompare[_i] = (parseFloat((coinValues[_i].USD.PRICE).substring(2).replace(/,/g, '')) -
              this.cryptoLastPrices[_i]);
          }
        }
        //console.log(this.cryptoLastPrices);

        for (let _i = 0; _i < coinKeys.length; _i++) {
          this.cryData[coinKeys[_i]] = {
            image: this.cryptoImages[_i],
            name: this.cryptoNames[_i],
            symbol: coinKeys[_i],
            price: coinValues[_i].USD.PRICE,
            marketCap: coinValues[_i].USD.MKTCAP,
            change24Num: parseFloat((coinValues[_i].USD.CHANGE24HOUR).substring(2).replace(/,/g, '')),
            priceCompare: this.cryptoPriceCompare[_i]
          }

          this.cryptoLastPrices[_i] = parseFloat((coinValues[_i].USD.PRICE).substring(2).replace(/,/g, ''));
          this.cryptos = JSON.parse(JSON.stringify(Object.values(this.cryData)));
        }
        //console.log(Object.values(this.cryData));
        this._loading = false;
        this.setTimer();
      });
  } 

I think the error is sitting on these lines

let coinKeys: any = Object.keys(this.receiveData);
let coinValues: any = Object.values(this.receiveData);

This is how i defined it in export class code private receiveData: any;, i've tried changing any to any[] and to string, i've tried some few other method to fix it but didn't work out, been battling with this for some days now. Someone should kindly help me out.

Solution

You seem to be correct about your analysis that might be causing the issue.

You will encounter the TypeError: Cannot convert undefined or null to object while trying to pass null or undefined values when the function expects an Object. In your case there are several code snippets that may result in the error:

Object.keys(this.receiveData)
Object.values(this.receiveData)
Object.values(this.cryData)

This is how i defined it in export class code private receiveData: any;, i've tried changing any to any[] and to string, i've tried some few other method to fix it but didn't work out

Simply specifying the Typescript type for the variables won't resolve the issue. You actually need to ensure that the value you are passing to Object.keys() and Object.values() is neither null nor undefined.

Answered By - Siddhant