TypeScript: add a new object into an array of objects

Question

I have the following data structure:

uiBundles:
[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    }
]

What I would like to do is add a new uiUnit into this embedded array of objects. Here is my code:

add-new.component.ts:

uiBundles: UIBUndle[];

ngOnInit(): void {
    this.getBundlesService.getUiBundles().subscribe((value: UIBundle[]) => this.uiBundles = value);
}

addWidget(id: string): void {
    this.selectedUiUnits = this.uiBundles.filter((data) => data.id === id);
    let newWidget = { id: 'new', uiUnits: [{ id: 'new-widget', type: 'widget', roles:'MB' }] };
}

add-new.component.html:

<div *ngFor="let bundle of uiBundles">
  <button (click)="addWidget(bundle.id)"></button>
</div>

When I run this code, the result is this:

[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "new",
        "uiUnits": [
            {
                "type": "widget",
                "id": "new-widget",
                "roles": "MB"
            }
        ]
    }
]

But what I am trying to do would be:

[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            },
            {
                "type": "widget",
                "id": "new widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    }
]

Can someone please help me, what did I do wrong here?

Would better if you could keep the indentation in your code blocks. — XouDo
– XouDo, Commented Dec 13, 2021 at 8:36
I can't see the place in your code where you are adding your new widget to the uiBundles. You are doing nothing with your newWidget variable, did you omit some code? — XouDo
– XouDo, Commented Dec 13, 2021 at 9:12

Aluan Haddad · Accepted Answer · 2021-12-13 09:23:07Z

1

You aren't adding the new widget to the uiUnits array of the widget with the specified id but instead are creating an entirely new widget.

What you want is rather

addWidgetToBundleUnits(id: string) {
  const selectedBundle = this.uiBundles.find(bundle => bundle.id === id);
  const widgetToAdd = {id: 'new-widget', type: 'widget', roles: 'MB'};
  selectedBundle.uiUnits.push(widgetToAdd);
}

edited Dec 13, 2021 at 9:23

answered Dec 13, 2021 at 8:56

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

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

Comments

DonJuwe · Accepted Answer · 2021-12-13 08:53:59Z

0

Try this:

addWidget(id: string): void {
    const index: number = this.uiBundles.findIndex((data) => data.id === id);
    const newUnits = [{ id: 'new-widget', type: 'widget', roles:'MB' }];

    this.uiBundles[index].uiUnits.push(newUnits);
}

answered Dec 13, 2021 at 8:53

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

Collectives™ on Stack Overflow

TypeScript: add a new object into an array of objects

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related