Angular 5将对象转换为嵌套JSON

Question

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.

Answer 1

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>

Answer 2

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.