Create array inside array in Angular

Question

I have this result retrieved from server side

this.lists = result['list_items'];

result['list_items']; contains all the elements returned from backend at a time i need only 0 index

Output of this.lists[0] :

lists: Array(1)
0:
Opt_1: "Option 1"
Opt_2: "Option 2"
Opt_3: "Option 3"
Text: "Text Message"
Status: "Active"

In this 0 index array i want to add one more array i want to store Opt_1,Opt_2,Opt_3 in an array and then place it in the same 0 index array

Resulting array should be like

0: 
Text: "Text Message" 
Status: "Active"
0:[
Opt_1: "Option 1",
Opt_2: "Option 2",
Opt_3: "Option 3"
]

Reason of creating array is because i want to create cdkdroplist and want to use loop through all the options.

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]" class="example-list" (cdkDropListDropped)="drop($event)">
                                                <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
                                            </div>

Any solution, Thanks

Answer 1

If you are looking for a dynamic solution, means you don't know the number of options you receive from the backend, I recommend this solution:

• remove text and status properties from the array list[0].
• set the rest of the properties into an array (the rest are the options of course)
• build a new object with array into another array with the list of options

here is stackblitz example for the solution I propose.

But you should know that the API response structure is too bad. the best way to go is to adjust your API response to the structure your frontend needs.