3

In our angular application we have the current situation, that an existing JSON file get's bigger and bigger with upcoming tasks and the idea is to split it up into multiple JSON files and import them at the right position if needed.

The objects are nested and the idea is, to split up the last object into a separate file and import it later. How do I achieve this? By looping through all nested objects until I find my property? General question, is this process basically considered as an import or merge? Is this good practice or should we rethink the process to avoid redundancy?

{
    "name":"a",
    "value1":"b",
    "properties": {
        "name":"aa",
        "value1":"bb",
        "properties": {
            "name":"aaa",
            "value1":"bbb",
            "properties": {
                //import here
}

I'm new in the business and also 1st time posting on stackoverflow, so please be gentle.

common sense
  • 3,775
  • 6
  • 22
  • 31
Sereghon
  • 123
  • 1
  • 5

1 Answers1

1

That's called flattening and it's a rather common issue.

To resolve it, use a recursive function (a function that calls itself).

I will give you the flattener from top to bottom, feel free to try starting from the bottom by yourself !

N.B. : (This is a rather advanced syntax, if you don't understand it I can explain it to you or simplify it)

const data = {
  id: 1,
  child: {
    id: 2,
    child: {
      id: 3,
      child: {
        id: 4,
        child: {
          id: 5,
        }
      }
    }
  }
};

const flattened = [];

function flatten(item, target) {
  const { child, ...toPush } = item;
  target.push(toPush);
  child && flatten(child, target);
}

flatten(data, flattened);

console.log(flattened);

You can then save every item of the array. I suggest you use a library for that, such as FileSaver, to create files and download them.

EDIT

Simplified :

const data = {
  id: 1,
  child: {
    id: 2,
    child: {
      id: 3,
      child: {
        id: 4,
        child: {
          id: 5,
        }
      }
    }
  }
};

const flattened = [];

function flatten(item, target) {
  const toPush = { id: item.id };
  const child = item.child;
  target.push(toPush);
  if (child) flatten(child, target);
}

flatten(data, flattened);

console.log(flattened);

Explanation

  • You start by creating a function : this function will accept an item, and a target as params.
  • In the function, you must add the item into the array, and do so with all of the child tree.
  • To do that, you create an empty array, and use .push with the item minus its child (in my case, only the ID)
  • Once pushed, you have to rerun this function, but the item becomes the child of the previous item.
  • You secure the function by using a condition that says it won't do anything if the child isn't defined.

With this, you get a flattened array, as seen in the console log.

For the "advanced syntax", I used destructuring assignement and logical operators, as explained here

Community
  • 1
  • 1