Changing a complex object within a nested array of a BehaviorSubject

Question

Changing a complex object within a nested array of a BehaviorSubject

I'm currently working on an Angular app. Within my service, DocumentService, I have a BehaviorSubject that holds an array of Documents.

documents: BehaviorSubject<Document[]>

Let me provide you with some insight into the various classes I've created:

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

class File {
  pages: Page[];
}

class Page {
  content: any;
  resolution: number;
}

Now, here's my dilemma - what is the most effective way to update the resolution property within a page? To achieve this, I need to navigate through the document, access the file, and then reach the specific page for modification. Unfortunately, directly updating in place isn't an option due to the requirement of using

this.documents.next(newDocumentsArray)

. I've tried deep copying methods like JSON.parse(JSON.stringify(...)), but encountered issues with circular structures. Other techniques such as .map and Object.assign only provide shallow copies that end up modifying the page directly, which is not permissible in this case.

Any suggestions or advice would be greatly appreciated. Thank you!

javascript angular typescript rxjs

Answer 1

Answer №1

To maintain your current deep structure, you'll have to dive deep into the code:

const updatedDocuments = oldDocuments.map(document => {
  if (document !== documentToUpdate) {
    return document;
  } else {
    return {
      ...document,
      files: document.files.map(file => ({
        ...file,
        pages: file.pages.map(page => {
          // implement page changes here
        })
      }))
    };
  }
});

I recommend transitioning to a flat Entity-style structure, where each Document, File, and Page is stored with a unique ID in separate dictionaries. The Document's files array would contain the IDs of its Files, and similarly for Files referencing their Pages. Does this approach resonate with you?

Answer 2

To maintain your current deep structure, you'll have to dive deep into the code:

const updatedDocuments = oldDocuments.map(document => {
  if (document !== documentToUpdate) {
    return document;
  } else {
    return {
      ...document,
      files: document.files.map(file => ({
        ...file,
        pages: file.pages.map(page => {
          // implement page changes here
        })
      }))
    };
  }
});

I recommend transitioning to a flat Entity-style structure, where each Document, File, and Page is stored with a unique ID in separate dictionaries. The Document's files array would contain the IDs of its Files, and similarly for Files referencing their Pages. Does this approach resonate with you?

Changing a complex object within a nested array of a BehaviorSubject

Answer №1

Similar questions

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

Issue with displaying a vTable component in VueJS / Vuetify

Refreshing a web page in Internet Explorer can cause the HTTP Header content to be altered

Unable to establish a cookie on an Angular client hosted anywhere except for 'localhost'

Connecting JavaScript and jQuery scripts

Looking to empty a textbox, give it focus, and avoid triggering an ASP.NET postback all with a single click of a

Having trouble with the Ajax load function not functioning in your HTML code?

Unable to run JavaScript file fetched from cache API

The Angular Router seamlessly transitions to a new view, while rendering it within the container of the preceding view

I'm encountering an undefined JavaScript variable, how should I proceed?

Tips for selecting the correct date on a DatePicker using selenium?

The hook from Supabase is facing issues with proper importing

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

The layout of an Angular Material page gets disrupted when a sticky "header" with md-select options is used in combination with the md-backdrop

Is there a way to detect and handle errors triggered by a callback function?

The functionality of React useState seems to be operational for one state, but not for the other

CSS rotation causing issues with absolute positioning

Hindering advancement: Bootstrap Form Wizard causing roadblocks

The MySQL error wreaks havoc on the Node.js server, causing it to

Identifying the Operating System and Applying the Appropriate Stylesheet