如何在Angular 2中将对象转换为JSON列表?

时间:2018-07-02 06:20:07

标签: json angular

我正在创建一个输出JSON的表单。我需要一些字段作为JSON列表。 例如:

{"Name":"sam","age":"21","Friends":[{"Name":"bob","age":"21"}]}

但是,当我使用这段代码JSON.parse(JSON.stringify(value))

我最终得到这样的东西

{"Name":"sam","age":"21","Friends":{"Name":"bob","age":"21"}}

[]丢失。如何制作JSON列表?

ps:我是Web开发的新手,如果问题很傻,请原谅我。

我的app.component.html

<div class="container">

  <form #payloadForm="ngForm" (ngSubmit)="onSubmit(payloadForm.value)">
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="Name" ngModel  value="" class="form-control">
    </div>
    <div class="form-group">
      <label>age</label>
      <input type="text" name="age" ngModel value="" class="form-control">
    </div>

  <div ngModelGroup="Friends">
<label>Friend Name</label>
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="Name" ngModel  value="" class="form-control">
    </div>
    <div class="form-group">
      <label>age</label>
      <input type="text" name="age" ngModel value="" class="form-control">
    </div>

    </div>
    <button type="submit" class="btn btn-primary" name="button">Submit</button>
  </form>

</div>

我的app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  onSubmit(value: any){
      console.log(JSON.parse(JSON.stringify(value)));
      console.log("String");
      console.log(JSON.stringify(value));
  }
}

1 个答案:

答案 0 :(得分:0)

您可以使用JSON.parse()来完成JSON字符串。之后,您可以简单地访问从JSON.parse()返回的对象中的数组。