Question

我想使用Angular 5 HttpClient发送post请求，但我正在努力将对象转换为嵌套的JSON。例如，我有这样的课程：

export class Team {

    members: Person[];

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

export class Person {

    name: string;
    gender: string;
    ...

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

预期的JSON主体应该是这样的：

{

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

我可以知道怎么做吗？提前谢谢。

Answer 1

这个样本会有所帮助，这是一个有效的例子：

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',

          },
  ]
}

要显示，您可以在'app.component.html'中使用以下内容：

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

</table>

Answer 2

如果您的对象模型与json输出相同，则使用json.stringify

const jsonstring = JSON.stringify(yourModel);

您可以像这样创建嵌套的json

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

我还建议你将嵌套类细分为小方法，这样可能会有更好的可读性。

const body ={

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

在使用之前确保JSON为valid。

Angular 5将对象转换为嵌套JSON

2 个答案: