Make an Behaviorsubject for nested serializer's data

Question

I try to make an articles app.

based on angular and ionic but the problem I face is the programming structure for Behaviorsubject for the serializer nested data. My backend uses django-rest-framework

*I successfully perform "CRUD" operations (I.e. live updates from server and behavior subject) with basic data I.e. only with author data or article data but failed with nested serialize data *

All I want the best practice of behavior subject for the nested data of authors and articles

Question.) Make an Behaviorsubject for one URLs http:local host:8000/v1/authors/ Which Uses nested serializer and returns both authors and articles data Below image ?

Below image shows authors array data with articles data of second model as nested (Thanks in advance)

[1]:

Code of my articles.service.ts

  extractArticles(data : AuthorsInterface[]){
/*
* Extracting then Returns
  * [] of Articles Data
  * from Parent Data
*/

let localArray = []
if (data.length > 0){
  for( let x in data ){
    if ( data[x].articles.length > 0 ){
      for( let y in data[x].articles){
        localArray.push(data[x].articles[y])
      }
    }
  }
  return this.articlesInterface.concat(localArray)
}

}

getParents() {
/*
* Calling REST-API
  * Extract Authors & Articles
  * from the parent Data
  * & cached them
*/
return this.http.get<AuthorsInterface[]>(this.AUTHOR_URL)
  .pipe(
    map(mapData=>{
        **here comes the combined data of articles and authors **
        *as shown in image*
        this.articlesBehavior.next(
        this.extractArticles(mapData)
      )        
    }
  )
)

Am i doing right ?

*Right now i just split the data after recieving from backend (by extracting the article's data from author's dictionary) and store it separetely

*articlesInterface for holding all the article authorsInterface for holding all the authors

Then inject article's service into authors's service don't know it's a best practice or not ?

I made two BehaviorSubject

Answer 1

You should include Article inside the Author model:

export interface Article {
  // fields for articles
}

export interface Author {
  // fields for autor
  articles: Article[]
}

This will ensure that the data you are getting from authors endpoint will match with the Author model and for articles endpoint use Article model.

There is no need to split the data coming from authors endpoint.

If there is a requirement to list all articles irrespective of author, then create a new url which returns all the articles and use Article model for that.