What is the best way to handle an object of objects in Angular 4

Question

Can Anyone please lead me in the correct way to handle a data structure like this :

 {  
      "1":{  
         "id":"1",
         "name":"Facebook",
         "created_at":"",
         "updated_at":"",
         "fields":{  
            "1":{  
               "id":"1",
               "name":"G\u00f6rsel",
               "service_id":"1",
               "ord":"1",
               "token":"fimage",
               "type":"1",
               "created_at":null,
               "updated_at":null
            },
            "2":{  
               "id":"2",
               "name":"Post Metini",
               "service_id":"1",
               "ord":"2",
               "token":"ftext",
               "type":"2",
               "created_at":null,
               "updated_at":null
            },
            "3":{  
               "id":"3",
               "name":"Ba\u015fl\u0131k",
               "service_id":"1",
               "ord":"3",
               "token":"fheader",
               "type":"2",
               "created_at":null,
               "updated_at":null
            },
            "4":{  
               "id":"4",
               "name":"Link A\u00e7\u0131klamas\u0131",
               "service_id":"1",
               "ord":"4",
               "token":"flink_description",
               "type":"2",
               "created_at":null,
               "updated_at":null
            }
         }
      },
      "2":{  },
      "3":{  }
}

I noticed that all angular cool functions like sorting, filtering looping through data are based onto javascript arrays so what is the best approach to handle similar structures in Angular 4, for example for use in *ngFor, or using filters and so on.. for example if I try to iterate this object with NgFor I get

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

at this point I do not know what action is best, I can ofcurse convert the object to an array, but is that my best approach?

Answer 1

I think the structure could be improved. It is a better option to use an array of objects under "fields". Then you would be able to loop through that array.

Answer 2

For anyone who may encounter a similar question, based on @ ThomasSablik comment and after taking his advise about using Pipes to handle it, I could find the suitable approach I was looking for, and I'm currently using the following pipe which is working like a charm

export class KeyValuesPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

Thanks to Thomas for putting me on the right direction.