[Fixed] How to get a desired output as custom array of objects?

Issue

Hi i am working on Angular 8 so here i came across one problem and i have simple api data like this:

this.inputData = [
      {
        id: 1,
        name: "john"
      },
      {
        id: 2,
        name: "joe"
      },
      {
        id: 3,
        name: "juke"
      }
    ];

So and for each student i want to give and send weights and send the data to another api so my sample expected outcome should be

 [{
     nameID: 1,weight:22
     },
     {
     nameID: 2,weight:22
     }
     {
     nameID: 3,weight:22
     }
     ]

Here is sample stackblitz

Solution

https://stackblitz.com/edit/angular-ivy-ayczfn?file=src%2Fapp%2Fapp.component.html

app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  inputData: any = [];
  weightperson: any;
  outputdata: any = [];

  constructor() {
    this.getApiData();
  }

  getApiData() {
    this.inputData = [
      {
        id: 1,
        name: "john"
      },
      {
        id: 2,
        name: "joe",
        weight: 44
      },
      {
        id: 3,
        name: "juke"
      }
    ];
  }

  getOutput() {
    this.outputdata = this.inputData.map(x => {
      return {
        nameID: x.id,
        weight: x.weight
      };
    });
    // expectedOutput is
    // [{
    // nameID: 1,weight:22
    // },
    // {
    // nameID: 2,weight:22
    // }
    // {
    // nameID: 3,weight:22
    // }
    // ]
  }
}

app.component.html

  <div class="container pt-5 pb-5">
  <div class="row pt-5">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th scope="col">name</th>
          <th scope="col">Weights</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of inputData; let i = index">
          <td>{{ row.name }}</td>
          <td>
            <input type="text" name="weightperson" class="form-control" [(ngModel)]="row.weight">
          </td>
        </tr>
        <button (click)="getOutput()">Submit</button>
      </tbody>
    </table>
  </div>
</div>
{{outputdata | json}}

Courtesy: Sujendra Shrestha ([email protected])