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

forming an instance from JSON information

It is impossible for Javascript to access an input element within a gridview

Learn how to resubscribe and reconnect to a WebSocket using TypeScript

Solving the Angular form glitch: error message not displaying

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

Material-UI: Creating Radio Button Groups

Send the Post model along with 2 checkbox lists to the controller using Jquery's Ajax function

Identify the mouse's location in relation to its parent element, not the entire webpage

Exploring the object structure received from AngularFire

Utilizing X-editable in an ASP MVC View: navigating the form POST action to the controller

Obtain real-time information from an object using React

Unable to modify existing attributes in a sails.js model

Having trouble getting routing to function properly with react-router-dom

Troubleshooting steps for resolving a node.js error during execution

Encountering RxJS errors during the process of constructing an object using streams retrieved from Firebase

Live search bar feature with jQuery更新

The issue arises with getInitialProps as it fails to pass data to the page component while attempting to retrieve initial information and subsequently modify it using a button

Deactivate tag Script using JQuery

Accessing array values depending on DOM response

What are the distinctions in type-narrowing when assigning values using ternary expressions versus if-else statements?