Q:

Map values from nested dataset

I am trying to map certain values from a particular data set but am not able to get all the data.
*Data set *
 this.medOptions = [
        {
          "selectedMAP": [
            {
              "mapId": 1,
              "mapName": "medtest3",
              "options": [
                {
                  "optionId": 1,
                  "optionName": "medoptiontest3",
                  "optionPrice": 1000
                }
              ]
            },
            {
              "mapId": 2,
              "mapName": "medtest4",
              "options": [
                {
                  "optionId": 2,
                  "optionName": "medoptiontest4",
                  "optionPrice": 2000
                }
              ]
            }
          ]
        }
     ]

map function
 initDynamicMedicalAidModel(): TemplateDynamicMedicalAid {
    return {
      dynamicPlanOptions: this.medOptions.map(x => ({
        isSelected: false,
        name: x.selectedMAP[0].options[0].optionName,
        amount: x.selectedMAP[0].options[0].optionPrice
      }))
    };
 }

Currently I am able to get the first set of values with using [0] but am struggling to get them all dynamically.
model
export interface TemplateDynamicMedicalAid {
  dynamicPlanOptions: Array<{ isSelected: boolean, name: string, amount: number }>;
}

TS
 @Input() medicalAidDynamic: TemplateDynamicMedicalAid;

HTML
 <div *ngFor="let plan of medicalAidDynamic.dynamicPlanOptions; let index = index;" class="line">
        <p-checkbox 
          binary="true" 
          [disabled]="mode == 'view'" 
          [(ngModel)]="medicalAidDynamic.dynamicPlanOptions[index].isSelected" >
        </p-checkbox> 
        {{ plan.providerName }}: {{ plan.name }} -  R{{ plan.amount | number:'':'en' }}
      </div>
 </div>

How can I get all the values in my data set within the map function?

A:

Instead of looping on this.medOptions you should loop over medOptions[0].selectedMAP to map the data. 

const medOptions = [
        {
          "selectedMAP": [
            {
              "mapId": 1,
              "mapName": "medtest3",
              "options": [
                {
                  "optionId": 1,
                  "optionName": "medoptiontest3",
                  "optionPrice": 1000
                }
              ]
            },
            {
              "mapId": 2,
              "mapName": "medtest4",
              "options": [
                {
                  "optionId": 2,
                  "optionName": "medoptiontest4",
                  "optionPrice": 2000
                }
              ]
            }
          ]
        }
     ];
     
    function getObj(arr){
     return {
      dynamicPlanOptions: medOptions[0].selectedMAP.map(x => ({
        isSelected: false,
        name: x.options[0].optionName,
        amount: x.options[0].optionPrice
      }))
    };
    } 
 let y = getObj(medOptions) ;
 console.log(y);

P.S : This works only if medOptions has only one element .

