Как получить Текущие 3 месяца на основе этого месяца динамически в javascript?

Question

JSON

[
  {
    "title": "Formula1",
    "month": "2020-03",
    "recieved_qty": 1020
  },
  {
    "title": "NewFormula",
    "month": "2020-03",
    "recieved_qty": 10
  }
]

Html: Здесь месяцы жестко закодированы. Вместо этого мне нужно динамически c названия месяцев на основе текущего месяца. Например => этот месяц - март, должен динамически получать март, апрель и май подряд. Можете ли вы помочь мне сделать это?

<div class="d-flex flex-row">
  <div style="font-size: 12px">Forecasted Product</div>
  <div style="margin-left: 15%;">Jan 2020</div>
  <div style="margin-left: 15%;">Feb 2020</div>
  <div style="margin-left: 15%;">Mar 2020</div>
</div>
<div formArrayName="schedularList" *ngFor="let item of schedulerArray.controls; let i = index;">
  <div [formGroupName]="i" class="add-div">
    <div class="d-flex flex-row" style="width:160px">
      <mat-form-field>
        <mat-select placeholder="Formulation" formControlName="formulation">
          <mat-option *ngFor="let item of formulationList" [value]="item.title"> {{item.title}} </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="quantity1" placeholder="Quantity">
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="quantity2" placeholder="Quantity">
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="quantity3" placeholder="Quantity">
      </mat-form-field>
    </div>
  </div>
</div>
<div class="add-div" (click)="addItem()">
  <span>Add Product for Forecast +</span>
  <!-- <i class="material-icons" >add_circle_outline</i> -->
</div>

component.ts: This.formulationList получит JSON, указанное выше

Мне нужно получить 3 месяца на основе текущего месяца динамически. Затем мне нужно сопоставить месяц и пропатчить значение количеств, объявленных в formarray schedulerList.

getRpsbasedOnMonth() {
  const payload = {
    company_id: this.userService.getUserdetails().CompanyUser.company_id.id
  }
  this.store.dispatch(new GetRPsBasedOnMonth(payload))
  this.store.pipe(select(getRpsBasedOnMonthSuccess)).subscribe((result: any) => {
    if (!!result) {
      console.log(result)
      this.formulationList = result.map(item => {
        item.month = item.month.substring(5, 8)
        return item
      })
      console.log(this.formulationList)

    }
  })
  this.store.pipe(select(getRpsBasedOnMonthError)).subscribe((result: any) => {
    if (!!result) {
      console.log(result)
      alert(result.error)
    }
  })
}

Answer 1

Вам просто нужно JS манипулирование датами?

const result = [{
    "title": "Formula1",
    "month": "2020-03",
    "recieved_qty": 1020
  },
  {
    "title": "NewFormula",
    "month": "2020-03",
    "recieved_qty": 10
  }
]
const [ year, month ] = result[0].month.split('-');

const date = new Date(year, month - 1, 1, 0, 0, 0);

const divs = document.querySelectorAll("#forecast>div:not(:first-child)");
for (let div of divs) {
  div.textContent = `${date.toLocaleString('default', { month: 'short' })} 
                     ${date.getFullYear()}`
  date.setMonth(date.getMonth() + 1)
} 

<div id="forecast">
  <div>Forecasted Product</div>
  <div style="margin-left: 15%;"></div>
  <div style="margin-left: 15%;"></div>
  <div style="margin-left: 15%;"></div>
</div>