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?

• XouDo: Would better if you could keep the indentation in your code blocks.
• Macy Narancs: code format improved
• XouDo: 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?

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