Getting error on console for number,string,boolean on console.Cannot find a differ supporting object '100' of type 'number'

Question

I have implemented this below code and its showing data properly on page but I am trying to find out why its giving error on console I have tried multiple ways to check the type of *ngIf="(parameter.value | type) === 'number'" and put parameter in div for each but nothing is working out and I am getting error on console and I am unable to find out the solution to stop this error.

I am using angular 10 and "primeng": "^9.0.6" version.

Can anyone please help me into this.

Thanks.

in html file -->


<p-accordion [multiple]="true">
                <p-accordionTab [selected] ="true" *ngFor="let category of response.categories"
                    header="{{ category.name | translate}}">
                    <div class="panel-body request-details">
                        <div *ngFor="let parameter of category.parameters ">
                            <div >
                                <div  class="col-md-12">
                                    <div class="request-legend ng-binding col-md-3"
                                        title="{{ parameter.name |translate}}">
                                        {{ parameter.name|translate }}
                                    </div>
                                    <div class="col-md-9 param-value">
                                        {{format( parameter.value) }}
                                    </div>
                                </div>         
                            </div>
                            <div *ngIf="isEmptyArray(parameter.value)" class="col-md-9 param-value">
                                Not defined</div>
                                <div *ngFor="let subparameter of parameter.value"> 
                                    <div class="col-md-offset-3 col-md-9 param-value">
                                            {{format(subparameter)}}
                                    </div>
                                </div>
                            </div>
                        </div>
                </p-accordionTab>
                <!--</div>-->
            </p-accordion>

in typescript file -->


this.service.getData().subscribe(
      data => { this.response = data;
       }, 
      error => {
    });

in model file -->


 export class Response {
    name?: string;
    categories?: Array<Object>;
}

in json file -->




{
    "name": "MSO",
    "categories": [
        {
            "name": "MSO_01",
            "parameters": [
                {
                    "name": "MSO_001",
                    "value": "Mso 2"
                },
                {
                    "name": "MSO_002",
                    "value": null
                }
            ]
        },
        {
            "name": "MSO_0023",
            "parameters": [
                {
                    "name": "MSO_005",
                    "value": "MSO_90"
                },
                {
                    "name": "MSO_090",
                    "value": 3
                },
                {
                    "name": "MSO_089",
                    "value": null
                },
                {
                    "name": "MSO_789",
                    "value": null
                }
            ]
        },
    ]
}

Error

core.js:4197 ERROR Error: Cannot find a differ supporting object 'mso' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3191)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7331)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshComponent (core.js:8454)
defaultErrorLogger @ core.js:4197
core.js:4197 ERROR Error: Cannot find a differ supporting object '3' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3191)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7331)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshComponent (core.js:8454)
defaultErrorLogger @ core.js:4197
3core.js:4197 ERROR Error: Cannot find a differ supporting object 'true' of type 'boolean'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3191)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7331)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshComponent (core.js:8454)
defaultErrorLogger @ core.js:4197
core.js:4197 ERROR Error: Cannot find a differ supporting object '1' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3191)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7331)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshEmbeddedViews (core.js:8408)
    at refreshView (core.js:7340)
    at refreshComponent (core.js:8454)

You should check before iterate the array in *ngFor **let subparameter of parameter.value** in the HTML file. Your JSON object doesn't contain any array for the parameter.value. **
Not defined
** Your condition div is closed before the iteration. If the Iterables are not an array, then this will happen. — Muthupriya, Aug 17 '20 at 19:33

Getting error on console for number,string,boolean on console.Cannot find a differ supporting object '100' of type 'number'

0 Answers0