Data from mockAPI not showing correctly in Angular 8 UI

0

Issue

I have a mockAPI and it is fetching the data correctly. The json response is complicated and is of type:

    [
  {
    "planList": [
      {
        "memberCost": {
          "memberResponsibility": "342",
          "totalCostofOwnership": "35",
          "serviceCategory": [
            {
              "benefitCategoryId": "63GD",
              "cost": "A,B,C",
              "benefitCategoryNm": "Alphabets",
              "providerNetwork": "ASKEE"
            },
            {
              "benefitCategoryId": "63GD",
              "cost": "876",
              "benefitCategoryNm": "Numbers",
              "providerNetwork": "1,2,3"
            }
          ]
        },
        "oopRemaining": "83",
        "planId": "1",
        "planName": "P1",
        "planPaidAmnt": "44",
      },
      {
        "memberCost": {
          "memberResponsibility": "97",
          "totalCostofOwnership": "23",
          "serviceCategory": [
            {
              "benefitCategoryId": "FJ87",
              "cost": "Left, Right",
              "benefitCategoryNm": "Directions",
              "providerNetwork": "JSKE"
            }
          ]
        },
        "oopRemaining": "12",
        "planId": "2",
        "planName": "P2",
        "planPaidAmnt": "74",
      },
      {
        "memberCost": {
          "memberResponsibility": "22",
          "totalCostofOwnership": "7",
          "serviceCategory": [
            {
              "benefitCategoryId": "78D3",
              "cost": "Jan, Feb",
              "benefitCategoryNm": "Months",
              "providerNetwork": "OPD7"
            }
          ]
        },
        "oopRemaining": "12",
        "planId": "3",
        "planName": "P3",
        "planPaidAmnt": "89",
      }
    ]
  }
]

Now in UI all information is coming correctly except for serviceCategory[] array. In UI I have 3 cards. Each card has a category option. For first card it should display the serviceCategory details for first object and so on. But it displays all the serviceCategory details under each card. Example: First card should only show Alphabets: ABC and Numbers 123 under category column and second card should display Direction Left Right and third card should display the months Jan, Feb. But it is displaying alphabets, numbers, direction and months under category column for each card.

I have attached a stackblitz along. https://stackblitz.com/edit/angular-ivy-citshn?file=src%2Fapp%2Fapp.component.html

Appreciate your help.

Solution

Hey you don’t need to make serviceDetails array and iterate again on it just continue with the above array i.e details, so you only need to replace this line

<ul class="collapse list-unstyled" id="serviceCategoryMenu{{i}}" *ngFor="let sCD of serviceDetails; let j = index">

With this :

<ul class="collapse list-unstyled" id="serviceCategoryMenu{{i}}" *ngFor="let sCD of details.memberCost.serviceCategory; let j = index">
          

It will work. I have tested it !! GOOD LUCK

Answered By – Sahil khan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More