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

Posted 2023-03-13

【中文标题】如何在 Angular 2 中将对象转换为 JSON 列表？

【英文标题】：How to convert an object to JSON list in Angular 2?

【发布时间】：2018-12-10 07:44:47

【问题描述】：

我正在创建一个输出 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：我是网络开发的新手，如果问题很愚蠢，请原谅我。

我的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));
  

【问题讨论】：

为什么要同时使用stringify和parse？它们相互抵消，结果仍然是value。所以，你不妨直接使用value。

还有，value的值是多少？

您误读了输出。您显示的不是有效的 JS 对象，也不是有效的 JSON。 stackblitz.com/edit/…。如需实际帮助，请发布一个完整的最小示例来重现该问题。

@BunyaminCoskuner 我关注了这个帖子***.com/questions/38372134/…

@JBNizet 请看我的代码并评论它

【参考方案1】：

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