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.

Pawel Kiszka · Accepted Answer · 2019-01-20 12:21:44Z

1

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>

answered Jan 20, 2019 at 12:21

Pawel Kiszka

8508 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codehunter Over a year ago

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 Over a year ago

please help me :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related