I am building an app in angular. My service DocumentService contains a BehaviorSubject of an array of Documents.

documents: BehaviorSubject<Document[]>

Here are the defintions of the classes I have :

class Document {
  name: string
  files: File[];
}

class File {
  pages: Page[];
}

class Page {
  data: any;
  scale: number;
}

My question is, what is the best way to update the scale property in a page? For this I would have to go down into the document, into the file, and then into the page to modify it. However, I cannot modify it in place since I have to use this.documents.next(newDocumentsArray). Problem is, deep copying doesn't work - JSON.parse(JSON.stringify(...)) gives me a circular structure error, while the other ways (.map, Object.assign, ...) only give me shallow copies that then modify the page in place, which is something that we can't do.

Any tips? Thanks

CodePudding user response：

If you wish to keep your current deep structure, you'd need to drill down:

const newDocs = oldDocs.map(doc => {
  if (doc !== docToChange) {
    return doc;
  } else {
    return {
      ...doc,
      files: doc.files.map(file => ({
        ...file,
        pages: file.pages.map(page => {
          // do page change here
        })
      }))
    };
  }
});

I'd suggest a switch to a flat Entity-like structure, where all Documents, Files, and Pages are stored by unique ID in separate dictionaries, and a Document's files array contains the ids of its Files, with the same for Files referring to their Pages. Does that make sense?