Encompassing object with Mobx observables

Question

Encompassing object with Mobx observables

I am searching for the best approach to implement @observable on a deeply nested JSON object structure, such as a tree. The data tree can go quite deep, with each node having multiple properties. However, I only need to observe one specific property in each tree node. When I use

@observable questionnaire = {}

it works, but I believe this is inefficient. I want to observe only the 'selected' property. Here is an example of the JSON structure. Please correct me if I am mistaken. Here is a simplified version of the questionnaire object:

[
  {
    "id": "1",
    "title": "level 1",
    "description": "text",
    "type": "Question",
    "selected": false,
    "childNodes": [
      {
        "title": "level 2",
        "description": "text",
        "type": "Question",
        "selected": false,
        "childNodes": [
          {
            "title": "level 3",
            "description": null,
            "type": "Question",
            "selected": false,
            "childNodes": [
              {
                "title": "level 4 1",
                "childNodes": [],
                "description": null,
                "type": "Checkbox",
                "selected": false
              },
              {
                "title": "level 4 2",
                "childNodes": [],
                "description": null,
                "type": "Checkbox",
                "selected": false
              },
              {
                "title": "level 4 3",
                "childNodes": [],
                "description": null,
                "type": "Checkbox",
                "selected": false
              },
              ...
            ]
          }, ...

javascript json mobx

Answer 1

Answer №1

To implement a structure where each node can be observed for changes, you can define a Node class like so:

class Node {
  @observable selected = false;
  @observable childNodes = asFlat([]);

  constructor(data) {
    // Create new `Node` instances recursively for all children.
    data.childNodes = data.childNodes.map(child => new Node(child));
    Object.assign(this, data);
  }
}

You can then instantiate a Node object using your top-level JSON object: new Node(json).

This method allows observation of changes in the selected and childNodes properties. Although it requires wrapping the original JSON in Node objects, this approach enables effective monitoring of changes.

Answer 2

To implement a structure where each node can be observed for changes, you can define a Node class like so:

class Node {
  @observable selected = false;
  @observable childNodes = asFlat([]);

  constructor(data) {
    // Create new `Node` instances recursively for all children.
    data.childNodes = data.childNodes.map(child => new Node(child));
    Object.assign(this, data);
  }
}

You can then instantiate a Node object using your top-level JSON object: new Node(json).

This method allows observation of changes in the selected and childNodes properties. Although it requires wrapping the original JSON in Node objects, this approach enables effective monitoring of changes.

Encompassing object with Mobx observables

Answer №1

Similar questions

PHP - Extract Information from Table Upon Form Submission without User Input

Having trouble with loading JavaScript during ng build --prod process

Save room for text that shows up on its own

jQuery UI Dialog is causing my DOM elements to shift positions

Display a form with hidden input that dynamically updates on any input change

Verify login availability using Javascript auto-check

Creating a conditional statement within an array.map loop in Next.js

A guide to sorting an array based on user input using Javascript

Fetching Json data from PHP server

Steer clear of duplicating patterns in vue templates

Ways to create a looping mechanism with specified number restrictions and limitations

What are the methods used by Typescript 2 to ensure non-nullable types?

Guide to formatting the timestamp in outgoing JSON

Updating a global variable in Angular after making an HTTP call

How can I expand all primary accordions while keeping secondary accordions collapsed?

Align the center of table headers in JavaScript

Solving template strings in a future context

React: Premature exit, Fewer hooks executed than anticipated

Sending POST Requests with Next.js Version 14

Calculating Time Difference in JavaScript Without Utilizing moment.js Library