0

I want to use Angular 5 HttpClient to send post request, but I am struggling casting object to nested JSON. For example, I have such class:

export class Team {

    members: Person[];

    constructor(members: Person[]) {
            this.members = members;
    }
}

export class Person {

    name: string;
    gender: string;
    ...

    constructor(...) { ... }
}

ANd the expected JSON body should be something like this:

{

    "members" : [
            {
                    "name" : someone01,
                    "gender" : ...,
                    ...
            },
            {
                    "name" : someone02,
                    "gender" : ...,
                    ...
            },
            ...
    ]
}

May I know how to do this? Thanks in advance.

Improve this question
3
  • 1
    what is the issue? not able to do JSON.stringify(members)? Commented Feb 20, 2018 at 6:04
  • I tried JSON.stringify, but seems that it does not work for nested object. Commented Feb 20, 2018 at 6:32
  • @RobbyCornelissen then i can use stringify? Commented Feb 20, 2018 at 6:33

2 Answers 2

Reset to default
1

If your object model is same as json output then use json.stringify

const jsonstring = JSON.stringify(yourModel);

You could create nested json like this

'members': membersCollection.map(element => ({
            'name': element.name,
            'gender': element.gender,
            'addresses: [element.Addresses.map(address=> ({
                        'city': address.cityName,
                        'country': address.country,
                        })]
        })),

I would also suggest you to breakdown nested classes to small methods, so might have better readability.

const body ={

'members' : [getMemebers(someClass)],
'addresses' : [getAddresses(someClass)],
};

make sure JSON is valid before using it.

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

Comments

0

This sample would help, its a working example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  title = 'app';
   val =data.members;
}

export class Team {
  members: Person[]
}

interface Person {
  name: string;
  gender: string;
}

const data:Team ={
  "members" : [
          { 
                  "name" : 'someone01',
                  "gender" : 'm',

          },
          {
                  "name" : 'someone02',
                  "gender" : 'f',

          },
  ]
}

In order to display, you can make use of the following in you 'app.component.html':

<table>
      <tr *ngFor="let item of val">
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
      </tr>

</table>
Improve this answer

3 Comments

Thanks for your reply. Can I construct JSON dynamically, e.g. read the input from template? Sorry I did not describe the question clearly..
when you say dynamically, from where are you getting the JSON object is what it matters. If you are loading from a file, you can make use of a similar solution as provided in it for reading from config file stackoverflow.com/questions/47745865/…
if you are getting it as a response from http, make use of this.val = response.json();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.