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?

Answer 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);
}

Answer 2

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);
}