Generate nested structure for dynamic data for angular

Question

I'm having a problem trying to generate a dynamic structure. I have the following string.

"Client->Plant->Route->Turn"

I have a list of devices that has a value on every field on this string and additional data, like this

[
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 1",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 1
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 2",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 2
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 3",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 3
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 2",
    "Route": "Route 1",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 4
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 3",
    "Turn": "Turn 4",
    "ascends": 10,
    "descends": 5,
    "deviceId": 5
  },
  {
    "Client": "Client 2",
    "Plant": "Plant 1",
    "Route": "Route 1",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 6
  }
]

I need to show this info in a dynamic bootstrap collpase

Client 1            
    Plant 1     
        Route 1 
            Turn 1
        Route 2 
            Turn 1
        Route 3 
            Turn 1
            Turn 4
    Plant 2     
        Route 1 
            Turn 1
Client 2            
    Plant 1     
        Route 1 
            Turn 1

I don't need to use idents in the collapse component, is just for make it more understandable.

I'm using angular 6, so I was searching components and I found one that allows you to generate "n" nested lists. https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

Here is an example of how should it look

[
  {
    "title": "Client 1",
    "children": [
      {
        "title": "Plant 1",
        "children": [
          {
            "title": "Route 1",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 1
              }
            ]
          },
          {
            "title": "Route 2",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 2
              }
            ]
          },
          {
            "title": "Route 3",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 3
              },
              {
                "title": "Turn 4",
                "ascends": 10,
                "descends": 5,
                "deviceId": 5
              }
            ]
          }
        ]
      },
      {
        "title": "Plant 2",
        "children": [
          {
            "title": "Route 1",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 4
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "title": "Client 2",
    "children": [
      {
        "title": "Plant 1",
        "children": [
          {
            "title": "Route 1",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 6
              }
            ]
          }
        ]
      }
    ]
  }
]

The first string that I put CAN CHANGE, so can be more items and have different order, that's why I need to make it dynamic.

I want to create an array like the component one example for display my data.

Also in the last level it must show the "additional data".

Thanks.

The most useful thing you can do here, is say, "this is my current data structure" (you did this). Now say, "this is the data structure I need for the component." That way, it'll be a pretty simple mapping alg. The second paragraph kind of looks like a data structure. If you can confirm that's actually how it should look, I can whip up the alg for you quickly. — Tim Consolazio
– Tim Consolazio, Commented Nov 4, 2018 at 20:31
Looks like the additional structure got you what you needed. — Tim Consolazio
– Tim Consolazio, Commented Nov 9, 2018 at 16:10

Nina Scholz · Accepted Answer · 2018-11-04 21:28:15Z

1

You could take an array for the keys for nesting the items and reduce the given data by reducing the keys and creating neede objects. Finally push the data at at the most nested array.

This approach uses rest properties for objects.

var data = [{ Client: "Client 1", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 1 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 2", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 2 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 3 }, { Client: "Client 1", Plant: "Plant 2", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 4 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 4", ascends: 10, descends: 5, deviceId: 5 }, { Client: "Client 2", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 6 }],
    keys = ['Client', 'Plant', 'Route'],
    tree = data.reduce((r, { Turn, ascends, descends, deviceId, ...o }) => {
        keys
            .reduce((s, k) => {
                var temp = s.find(({ title }) => title === o[k]);
                if (!temp) {
                    s.push(temp = { title: o[k], children: [] });
                }
                return temp.children;
            }, r)
            .push({ title: Turn, ascends, descends, deviceId });
        return r;
    }, []);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

A differetn approach wich takes all properties dynamically by using an array of the keys for nesting.

var data = [{ Client: "Client 1", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 1 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 2", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 2 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 3 }, { Client: "Client 1", Plant: "Plant 2", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 4 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 4", ascends: 10, descends: 5, deviceId: 5 }, { Client: "Client 2", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 6 }],
    keys = ['Client', 'Plant', 'Route', 'Turn'],
    tree = [];


data.reduce((r, o) => {
    var p = keys.reduce((s, k) => {
        s.children = s.children || [];
        var temp = s.children.find(({ title }) => title === o[k]);
        if (!temp) {
            s.children.push(temp = { title: o[k] });
        }
        return temp;
    }, r);
    Object
        .keys(o)
        .filter(k => !keys.includes(k))
        .forEach(k => p[k] = o[k]);
    return r;
}, { children: tree });

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Nov 4, 2018 at 21:28

answered Nov 4, 2018 at 21:13

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abdel Posada Over a year ago

The second one was the one I was looking for, thank you so much.

Abdel Posada Over a year ago

Schoolz I noticed that this doesn't works when I have two devices with the same Fields, it overrides the previous value with the latest one

Nina Scholz Over a year ago

right, but you did not add an alternative to that. what result do you like to get in this case?

Abdel Posada Over a year ago

Sorry, didn't read your last comment, I ended up adding a validation in the keys reduce by checking the id property, but the functionality was my solution. Again, thank you

Collectives™ on Stack Overflow

Generate nested structure for dynamic data for angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related