Утро доброе. народ пните в нужном направлении пожалуйста. понимаю что

нужно заюзать пайп мап и прочее, но что то совсем не могу разобраться как это сделать правильно.
есть интерфейс
export interface Shelving {
_id?: string,
name: string,
location: string,
comment: string,
catID: string,
catName: string
}
при помощи сервиса получаю дату с сервера
fetch(): Observable<Shelving[]> {
return this.http.get<Shelving[]>('api/shelving')
}
вот обьект:
{
"_id": "5ec3edbab1565f5d671c201e",
"name": "89",
"comment": "",
"catID": "",
"catName": "5ec3ed79b1565f5d671c201c",
"location": "5ec3eccef1d51c3a48bd722e",
"__v": 0,
"categoryName": [ <-------------- object
{
"_id": "5ec3ed79b1565f5d671c201c",
"catName": "test category name", <------------------ имя которое нужно
"comment": "",
"__v": 0
}
],
"locationObj": [
{
"_id": "5ec3eccef1d51c3a48bd722e",
"name": "yyy",
"phone": "+2310232309",
"comment": "",
"address": "EGNATIA 156",
"__v": 0
}
]
}
нужно categoryName -> catName запушить по интерфейсу в поле catName
а то приходится распечатывать в компоненте вот так
<td>{{ shelving.categoryName[0].catName }}</td>
а хотелось бы вот так {{ shelving.catName }}

map(item -> {...item, catName: categoryName[0].catName })