orderBy type number results in error

[Faey2222]

Hello,

im trying to use the orderBy pipe within an ngFor. But unfortunately I get an error if the value in the variable of the array is of type number

[fknop]

Could you give me the code that produces this error ? Typescript and HTML.

[Faey2222]

HTML:

<nav ngIf="metaCategories">
  <ul class="nav nav-tabs">
    <li ngFor="let category of metaCategories | objToArr | orderBy: 'position'" class="nav-item">
      <a href="#" class="nav-link">
        <i class="fa {{category.icon}}" title="{{category.name}}"></i>
      </a>
    </li>
  </ul>
</nav>

TypeScript:

import {Component, OnInit} from '@angular/core';
import * as globals from '../../shared/globals';
import {ShareService} from "../../shared/share-service";

@Component({
  selector: '[syLiveEditMetabar]',
  inputs: ['syLiveEditMetabar'],
  templateUrl: 'metabar.component.html',
  styles: []
})
export class MetabarComponent implements OnInit {
  private syLiveEditMetabar;
  private metaCategories = [];
  private metaConfiguration;

  constructor(private shareService: ShareService) { }

  ngOnInit() {
    this.shareService.getPageData()
      .subscribe(
        result => {
          if(result.metaConfiguration && !this.metaConfiguration) {
            this.metaConfiguration = result.metaConfiguration;

            /**
             * Define used metaCategories
             */
            for(var x = 0; this.metaConfiguration.groups.length != x; x++) {
              if(globals.MetaCategories) {
                for(var category in globals.MetaCategories) {
                  if(globals.MetaCategories[category].alias == this.metaConfiguration.groups[x].category) {
                    this.metaCategories[category] = globals.MetaCategories[category];
                  }
                }
                //this.metaConfiguration.groups[x]
              }
            }
            console.log(this.metaCategories);
          }
        }
      )
  }

}

Result of the subscription (result.metaConfiguration) is:
{ groups: [ { name: "Seiten-Informationen", alias: "seiteninformationen", visible: false, position: "1", category: "Basicdata" }, { name: "Veröffentlichung", visible: false, position: "2", category: "Basicdata" }, { name: "Sicherheit", visible: true, position: "1", category: "Security" } ] , elements: [ { label: "Seiten-Titel", alias: "Titel", type: "text", group: "seiteninformationen", mandatory: true, validations: [ "min:3" ] }, { label: "Seiten-Alias", alias: "Alias", type: "text", group: "seiteninformationen", mandatory: false, validations: [] } ] };

Result of globals.MetaCategories is:
{ Basisdaten: { name: 'Basisdaten', alias: 'Basicdata', icon: 'fa-info', position: 4 }, Security: { name: 'Sicherheit', alias: 'Security', icon: 'fa-users', posiiton: 2, }, Settings: { name: 'Einstellungen', alias: 'Settings', icon: 'fa-wrench', position: 3 } };

[fknop]

objToArr is one of your own pipe ?

[Faey2222]

Yes.

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'objToArr',
  pure: false
})

export class ObjToArr implements PipeTransform {
  /**
   * Pipe (filter) to transform an object to an array
   * @param object
   * @returns {Array}
   */
  transform(object: any) {
    var newArray = []
    for (var key in object) {
      newArray.push(object[key]);
    }
    return newArray;
  }
}

[fknop]

Could you maybe print what comes out of objToArr ? To check if it's really an array of numbers only.

[Faey2222]

Unfortunately the result of objToArr results in something else than expected. Guess you can close this issue :) Thanks.