0

On a new project with .net core and Angular 4 - I had to wait till a real database was in place.

Now that it IS there a DBA , along with a backend developer ended up a web api that I need to call and fetch a nested object with data that I had much simpler in arrays.

Current Data calls

Here is where I call a method to retrieve all the categories 

getCategory() {
    return [
        new Category(1, 1, 'VAMC-Cat-1'),
        new Category(2, 1, 'VAMC-Cat-2'),
        new Category(3, 1, 'VAMC-Cat-3'),
        new Category(4, 2, 'Vet-Cat-1'),
        new Category(5, 2, 'Vet-Cat-2'),
        new Category(6, 2, 'Vet-Cat-3'),
        new Category(7, 3, 'Provider-Cat-1'),
        new Category(8, 3, 'Provider-Cat-2'),
        new Category(9, 3, 'Provider-Cat-3'),
        new Category(10, 4, 'Other-Cat-1'),
        new Category(11, 4, 'Other-Cat-2'),
        new Category(12, 4, 'Other-Cat-3'),
        new Category(13, 5, 'None-Cat-1'),
        new Category(14, 5, 'None-Cat-3'),
        new Category(15, 5, 'None-Cat-2'),
    ];
}

If you scroll down you can see that my single call for 3 cascading dropdowns is all in 1 big complex object. HOW can I make calls to this data that I need to persist in Angular4/typescript . Any ideas / examples ?

New Data that will return (swagger ui ) I used to call the web api 

[
  {
    "customerTypeId": 1,
    "customerTypeName": "VAMC",
    "childCategories": [
      {
        "categoryId": 1,
        "categoryName": "VAMC-Cat-1",
        "customerTypeID": 1,
        "childSubCategories": [
          {
            "subCategoryId": 1,
            "subCategoryName": "VAMC-SubCat-1-1",
            "categoryID": 1
          },
          {
            "subCategoryId": 2,
            "subCategoryName": "VAMC-SubCat-1-2",
            "categoryID": 1
          }
        ]
      },
      {
        "categoryId": 2,
        "categoryName": "VAMC-Cat-2",
        "customerTypeID": 1,
        "childSubCategories": [
          {
            "subCategoryId": 3,
            "subCategoryName": "VAMC-SubCat-2-1",
            "categoryID": 2
          },
          {
            "subCategoryId": 4,
            "subCategoryName": "VAMC-SubCat-2-2",
            "categoryID": 2
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 2,
    "customerTypeName": "Vet",
    "childCategories": [
      {
        "categoryId": 3,
        "categoryName": "Vet-Cat-1",
        "customerTypeID": 2,
        "childSubCategories": [
          {
            "subCategoryId": 5,
            "subCategoryName": "Vet-SubCat-1-1",
            "categoryID": 3
          },
          {
            "subCategoryId": 6,
            "subCategoryName": "Vet-SubCat-1-2",
            "categoryID": 3
          }
        ]
      },
      {
        "categoryId": 4,
        "categoryName": "Vet-Cat-2",
        "customerTypeID": 2,
        "childSubCategories": [
          {
            "subCategoryId": 7,
            "subCategoryName": "Vet-SubCat-2-1",
            "categoryID": 4
          },
          {
            "subCategoryId": 8,
            "subCategoryName": "Vet-SubCat-2-2",
            "categoryID": 4
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 3,
    "customerTypeName": "Provider",
    "childCategories": [
      {
        "categoryId": 5,
        "categoryName": "Provider-Cat-1",
        "customerTypeID": 3,
        "childSubCategories": [
          {
            "subCategoryId": 9,
            "subCategoryName": "Provider-SubCat-1-1",
            "categoryID": 5
          },
          {
            "subCategoryId": 10,
            "subCategoryName": "Provider-SubCat-1-2",
            "categoryID": 5
          }
        ]
      },
      {
        "categoryId": 6,
        "categoryName": "Provider-Cat-2",
        "customerTypeID": 3,
        "childSubCategories": [
          {
            "subCategoryId": 11,
            "subCategoryName": "Provider-SubCat-2-1",
            "categoryID": 6
          },
          {
            "subCategoryId": 12,
            "subCategoryName": "Provider-SubCat-2-2",
            "categoryID": 6
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 4,
    "customerTypeName": "Other",
    "childCategories": [
      {
        "categoryId": 7,
        "categoryName": "Other-Cat-1",
        "customerTypeID": 4,
        "childSubCategories": [
          {
            "subCategoryId": 13,
            "subCategoryName": "Other-SubCat-1-1",
            "categoryID": 7
          },
          {
            "subCategoryId": 14,
            "subCategoryName": "Other-SubCat-1-2",
            "categoryID": 7
          }
        ]
      },
      {
        "categoryId": 8,
        "categoryName": "Other-Cat-2",
        "customerTypeID": 4,
        "childSubCategories": [
          {
            "subCategoryId": 15,
            "subCategoryName": "Other-SubCat-2-1",
            "categoryID": 8
          },
          {
            "subCategoryId": 16,
            "subCategoryName": "Other-SubCat-2-2",
            "categoryID": 8
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 5,
    "customerTypeName": "None",
    "childCategories": [
      {
        "categoryId": 9,
        "categoryName": "None-Cat-1",
        "customerTypeID": 5,
        "childSubCategories": [
          {
            "subCategoryId": 17,
            "subCategoryName": "None-SubCat-1-1",
            "categoryID": 9
          },
          {
            "subCategoryId": 18,
            "subCategoryName": "None-SubCat-1-2",
            "categoryID": 9
          }
        ]
      },
      {
        "categoryId": 10,
        "categoryName": "None-Cat-2",
        "customerTypeID": 5,
        "childSubCategories": [
          {
            "subCategoryId": 19,
            "subCategoryName": "None-SubCat-2-1",
            "categoryID": 10
          },
          {
            "subCategoryId": 20,
            "subCategoryName": "None-SubCat-2-2",
            "categoryID": 10
          }
        ]
      }
    ]
  }
]
  • Give the backend dev a slap? Joke. What does the finished array need to look like? You'll need to loop the data and build what you need. – Joe Keene Sep 22 '17 at 08:25
  • Funny you say that. A developer on our team that is older with spectable glasses and wears suspenders daily we like to call him "the banker" well he is both smart and funny ... and on the phone with this remote developer that built the web api and other backend ... our "banker" guy said "Hey John, MIT called and wanted some help with the rocket science their doing" ... "this is just too overengineered..." –  Sep 22 '17 at 08:36
  • I suppose that I need to have modified methods that pass in a parent id and loop over the data to return the appropriate data - so for your question , example is the getCategory method in which I need to loop over and put all category names together . what is the best way to do that ? –  Sep 22 '17 at 08:39

1 Answers1

0

You can use Array map(), reduce() in different ways as you prefer. Its nice to look into filter() as well.

There is a usage of destruction in parameters also here.

In Angular 4, I hope you already have a service for this, if not create one. From the service you can call the API, transform the result, return a Promise or Observer that you can resolve / subscribeto from your component.

let result = data.map(item => item["childCategories"])
  .reduce((a, item) => a.concat(item), [])
  .map(({
    categoryId,
    categoryName,
    customerTypeID
  }) => ({
    categoryId,
    categoryName,
    customerTypeID
  }));

The last map can be changed to have your class in there:

  .map(({
    categoryId,
    categoryName,
    customerTypeID
  }) => new Category(
    categoryId,
    categoryName,
    customerTypeID
  ));


const data = [{
    "customerTypeId": 1,
    "customerTypeName": "VAMC",
    "childCategories": [{
        "categoryId": 1,
        "categoryName": "VAMC-Cat-1",
        "customerTypeID": 1,
        "childSubCategories": [{
            "subCategoryId": 1,
            "subCategoryName": "VAMC-SubCat-1-1",
            "categoryID": 1
          },
          {
            "subCategoryId": 2,
            "subCategoryName": "VAMC-SubCat-1-2",
            "categoryID": 1
          }
        ]
      },
      {
        "categoryId": 2,
        "categoryName": "VAMC-Cat-2",
        "customerTypeID": 1,
        "childSubCategories": [{
            "subCategoryId": 3,
            "subCategoryName": "VAMC-SubCat-2-1",
            "categoryID": 2
          },
          {
            "subCategoryId": 4,
            "subCategoryName": "VAMC-SubCat-2-2",
            "categoryID": 2
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 2,
    "customerTypeName": "Vet",
    "childCategories": [{
        "categoryId": 3,
        "categoryName": "Vet-Cat-1",
        "customerTypeID": 2,
        "childSubCategories": [{
            "subCategoryId": 5,
            "subCategoryName": "Vet-SubCat-1-1",
            "categoryID": 3
          },
          {
            "subCategoryId": 6,
            "subCategoryName": "Vet-SubCat-1-2",
            "categoryID": 3
          }
        ]
      },
      {
        "categoryId": 4,
        "categoryName": "Vet-Cat-2",
        "customerTypeID": 2,
        "childSubCategories": [{
            "subCategoryId": 7,
            "subCategoryName": "Vet-SubCat-2-1",
            "categoryID": 4
          },
          {
            "subCategoryId": 8,
            "subCategoryName": "Vet-SubCat-2-2",
            "categoryID": 4
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 3,
    "customerTypeName": "Provider",
    "childCategories": [{
        "categoryId": 5,
        "categoryName": "Provider-Cat-1",
        "customerTypeID": 3,
        "childSubCategories": [{
            "subCategoryId": 9,
            "subCategoryName": "Provider-SubCat-1-1",
            "categoryID": 5
          },
          {
            "subCategoryId": 10,
            "subCategoryName": "Provider-SubCat-1-2",
            "categoryID": 5
          }
        ]
      },
      {
        "categoryId": 6,
        "categoryName": "Provider-Cat-2",
        "customerTypeID": 3,
        "childSubCategories": [{
            "subCategoryId": 11,
            "subCategoryName": "Provider-SubCat-2-1",
            "categoryID": 6
          },
          {
            "subCategoryId": 12,
            "subCategoryName": "Provider-SubCat-2-2",
            "categoryID": 6
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 4,
    "customerTypeName": "Other",
    "childCategories": [{
        "categoryId": 7,
        "categoryName": "Other-Cat-1",
        "customerTypeID": 4,
        "childSubCategories": [{
            "subCategoryId": 13,
            "subCategoryName": "Other-SubCat-1-1",
            "categoryID": 7
          },
          {
            "subCategoryId": 14,
            "subCategoryName": "Other-SubCat-1-2",
            "categoryID": 7
          }
        ]
      },
      {
        "categoryId": 8,
        "categoryName": "Other-Cat-2",
        "customerTypeID": 4,
        "childSubCategories": [{
            "subCategoryId": 15,
            "subCategoryName": "Other-SubCat-2-1",
            "categoryID": 8
          },
          {
            "subCategoryId": 16,
            "subCategoryName": "Other-SubCat-2-2",
            "categoryID": 8
          }
        ]
      }
    ]
  },
  {
    "customerTypeId": 5,
    "customerTypeName": "None",
    "childCategories": [{
        "categoryId": 9,
        "categoryName": "None-Cat-1",
        "customerTypeID": 5,
        "childSubCategories": [{
            "subCategoryId": 17,
            "subCategoryName": "None-SubCat-1-1",
            "categoryID": 9
          },
          {
            "subCategoryId": 18,
            "subCategoryName": "None-SubCat-1-2",
            "categoryID": 9
          }
        ]
      },
      {
        "categoryId": 10,
        "categoryName": "None-Cat-2",
        "customerTypeID": 5,
        "childSubCategories": [{
            "subCategoryId": 19,
            "subCategoryName": "None-SubCat-2-1",
            "categoryID": 10
          },
          {
            "subCategoryId": 20,
            "subCategoryName": "None-SubCat-2-2",
            "categoryID": 10
          }
        ]
      }
    ]
  }
];
let result = data.map(item => item["childCategories"])
  .reduce((a, item) => a.concat(item), [])
  .map(({
    categoryId,
    categoryName,
    customerTypeID
  }) => ({
    categoryId,
    categoryName,
    customerTypeID
  }));
console.log(result);
sabithpocker
  • 15,274
  • 1
  • 42
  • 75