How to Observable map nested json objects with different property names - Angular

Question

I have an json result which has nested objects. I need to cast them to my custom objects ( prime ng tree table json) which have different property names than the json result.

JSON meesage:

{
      brinname: "Aamir",
      aantalPersonen: "122",
      signalenVestiging: [
        {
          vestiging: "Ranchi",
          aantalPersonen: "102",
          signalenCode: [
            {
            signaalCode: "4",
            aantalPersonen: "15"
           },
          {
            signaalCode: "5",
            aantalPersonen: "15"
          } ]
        }, {
          vestiging: "Bangalore",
          aantalPersonen: "82",
          signalenCode: [
            {
              signaalCode: "6",
              aantalPersonen: "15"
            },
            {
              signaalCode: "7",
              aantalPersonen: "15"
            } ]
        } ]

    },
    {
      brinname: "Abhinav",
      aantalPersonen: "122",
      signalenVestiging: [
        {
          vestiging: "Bangalore",
          aantalPersonen: "102",
          signalenCode: [ {
            signaalCode: "7",
            aantalPersonen: "15"
          }]
        } ]

Required format :

[{
  "data":
  [
    {
      "data":{
        "name":"Aamir",
        "aantalPersonen":"122",
      },
      "children":[
        {
          "data":{
            "name":"Ranchi",
            "aantalPersonen":"102",

          },
          "children":[
            {
              "data":{
                "signaalCode":"4",
                "aantalPersonen":"15",
              }
            },
            {
              "data":{
                "signaalCode":"5",
                "aantalPersonen":"10",
              }
            },

          ]
        },
        {
          "data":{
          vestiging: "Bangalore",
          aantalPersonen: "82",
          },
          "children":[
            {
              "data":{
                signaalCode: "6",
              aantalPersonen: "15"
              }
            }
          ]
        }
      ]
    }
     ,
    {
      "data":{
         brinname: "Abhinav",
      aantalPersonen: "122",

      },
      "children":[
        {
          "data":{
             vestiging: "Bangalore",
          aantalPersonen: "102",
          }
        },
       "children":[
            {
              "data":{
                "signaalCode":"4",
                "aantalPersonen":"15",
              }
            }
      ] ]
    } 

  ]
}]

So, how can I map the json like this?: Can some one please give me a demo example . ia m new in angular and getting a lot of trouble to solve it . It would be really great help for me.

score 1 · Answer 1 · answered Jan 20 '19 at 12:21

I'm assuming that the 'json result' comes from backend call. So the best and easiest way would be to map the observable to your destination format.

You should use HttpClient (the call to backend will return you an Observable) -> https://angular.io/guide/http
Create an interface, that will describe json object field names (let's call it PersonalDetails):

  export interface PersonalDetails {
   brinname: string,
   aantalPersonen: string,
   ...
}

There can be several interfaces (the json object is really big, so it might be good to split it and create other interfaces, that will be nested inside the first one).

Create interface for 'prime ng tree table json' => same as above, let's call it PrimeNgTableData
Create a function, that will take a parameter of type 'PersonalDetails' (from point 2.) and will cast it to second interface PrimeNgTableData (from point 3.). Let's name that function like that:

  export function asPrimeNgTableData(personalDetails: PersonalDetails): PrimeNgTableData {
   return {
      ...
    }
  }

Create new observable, that will keep the primeNgTableData values:

   private personalDetails$: Observable<PersonalDetails> = this.someServiceThatCallsHttp.getPersonalDetails();

   private primeNgTableData$: Observable<PrimeNgTableData> = this.personalDetails$.pipe(
      map((personalDetails: PersonalDetails) => asPrimeNgTableData(personalDetails))
    );

Use primeNgTableData$ in your html template (let's assume, that the html tag that you wanna use is called 'ngTable', and it gets 'data' input, that has a type of PrimeNgTableData

  <ngTable [data]="primeNgTableData$ | async"> 
    ....
  </ngTable>

Hey! Thanks a lot for your example. I am getting stuck on point 3 and 4. It would be really grat help if i can get live demo example . Thanks in advance — codehunter, Jan 21 '19 at 22:47

How to Observable map nested json objects with different property names - Angular

1 Answers1

Linked