Всем привет) Я делаю запрос: http://192.168.1.10/api/elements, мне приходит ответ с

массивом results и полем next в котором находится url для получения следующей части массива. Это нужно для infinite scroll. То есть каждый раз когда мы подбираемся к нижней части страницы, то отправляется новый запрос с новым offset.
{
"count": 50,
"next": "http://192.168.1.10/api/elements/?limit=2&offset=2",
"results": [
{
"id": 1,
"text": "some text",
},
{
"id": 2,
"text": "another text",
}
]
}

Но вот теперь стоит задача грузить столько элементов, пока не получим элемент с определенным id.
Например есть id = 10.
Значит придется сделать 5 таких запросов.

Подскажите, пожалуйста, как это красиво сделать?

Текущая реализация такая:
getElements(): void {
// загрузка первой части
if (!this.elementsNext) {
this.api.getIndustryDirections()
.subscribe((resp) => {
this.elements = resp.results;
this.elementsNext = resp.next;
});
}
//подгрузка следующих элементов
if (this.elementsNext) {
this.api.getIndustryDirections(this.elementsNext)
.subscribe((resp) => {
this.elements = [...this.elements, ...resp.results];
this.elementsNext = resp.next;
});
}
}

Попробуй посмотреть, может поможет https://stackoverflow.com/questions/47968955/recursive-observable https://stackoverflow.com/questions/60455626/recursion-and-observable-rxjs