在 Angular 9 中映射 JSON答案

【问题标题】：Map JSON in Angular 9在 Angular 9 中映射 JSON
【发布时间】：2020-10-08 05:49:27
【问题描述】：

我使用 Angular 设计了一个应用程序，该应用程序使用 ASP.NET 制作的后端链接到数据库我的问题是我在前端的 JSON 与后端的 JSON 有点不同。我需要有关如何映射前端 JSON 以将其发送到后端的帮助。

psd：我在前端创建了所有的接口，我在前端使用了formControls和FormArrays来存储数据，问题是de JSON有点不同。我无法更改后端的 JSON，因为它与 DB 链接并且它具有 PK 和 FK，所以这就是原因，因为它有点不同。我正在考虑做类似 this.myform.value 的事情并映射到另一个界面，但我不知道该怎么做，因为我有数组数组...... 也许是一个 for 循环？

这是我的前端 JSON：

{
  "non-array fields....................." : "bla bla",
  "arraySustancias": [
    {
      "sustanciaActiva": "hello",
      "contenido": "2",
      "suministro": ["hello2","hello3"],
      "unidades": "3"
    }
  ],


      "arrayProcedimientos": [
    {
      "procedimiento": "",
      "fechaInicioProcedimiento": "",
      "fechaFinProcedimiento": "",
      "notasProcedimiento": "",
      "arraySubprocedimientos": [
        {
          "subprocedimiento": "",
          "fechaInicioSubProcedimiento": "",
          "fechaFinSubProcedimiento": "",
          "notasSubProcedimiento": "",
          "exp": ""
        }
      ]
    }
  ]
}

这是我的后端 JSON：

{
  "non-array fields.....................": "bla bla",
  "registros_arraySustancias": [
    {
      "registros_arraySustancias_suministro": [
        {
          "registros_arraySustancias_id": "",
          "id": "",
          "value": [
            "ABBOTT LABORATORIES",
            "ADAMA Agan Ltd."
          ]
        }
      ],
      "registros_id": "",
      "id": "",
      "sustanciaActiva": "hola",
      "contenido": 2,
      "unidades": 3
    }
  ],
  "registros_arrayProcedimientos": [
    {
      "registros_id": "",
      "id": "",
      "procedimiento": "text",
      "fechaInicioProcedimiento": "18/06/2020",
      "fechaFinProcedimiento": "18/06/2020",
      "notasProcedimiento": "notes",
      "registros_arrayProcedimientos_arraySubprocedimientos": [
        {
          "registros_arrayProcedimientos_id": "",
          "id": "",
          "subprocedimiento": "text",
          "fechaInicioSubProcedimiento": "19/06/2020",
          "fechaFinSubProcedimiento": "19/06/2020",
          "notasSubProcedimiento": "notes"
        }
      ]
    }
  ]
}

感谢您的帮助:)

【问题讨论】：

id 或_id 字段都是主键和外键，是自增的，不需要有值。
我的意思是，这里的问题是什么？你从哪里得到那个 JSON？您可以更改生成的格式，或者您只需编写一个转换它的函数。在 TypeScript/JavaScript 中，您可以只将 JSON 作为对象，然后必须将其分配给不同结构的对象。你要我们做什么，一行一行的给你写好？
并不是所有的代码我都有关于如何做到这一点的理论，我只需要一个小例子或类似的例子来说明如何做到这一点。 @BenjaminMaurer

标签： json angular api

【解决方案1】：

您只需从原始对象创建一个对象。没有神奇或自动的方法可以做到这一点。示例：

interface OriginalData {
    foo: string;
    baz: {
        test: number[]
    };
}

interface MyData {
    foobar: string;
    bazTest: number[];
}

function getData(): Observable<OriginalData> {
  return this.http.get<OriginalData>(url);
}

function convertData(original: OriginalData): MyData {
    const res: MyData = {
        foobar: original.foo,
        bazTest: original.baz.test
    };

    return res;
}

// somewhere in your code
getData().subscribe(
    v => sendData(convertData(v))
);

我在这里使用 Angular http 客户端，因为您添加了标签“angular”。它会给你一个你指定类型的对象。

【讨论】：

感谢您的回答，但是当您有一个数组时会发生什么？你能举个例子吗？
老实说，这个问题质量很低。我不知道你想达到什么目的。现在阅读您的其他 cmets，您实际上在将其发送到后端之前使用表单生成了 json？那么，如果你生成它，为什么还要转换它呢？您可以在表单中创建正确的嵌套结构！现在你问我关于嵌套数组的问题——好的，那又怎样？嵌套数组转换成什么？请阅读：stackoverflow.com/help/how-to-ask
基本上我需要用你的答案解决的问题。也许我的问题问得不好。我与嵌套数组相关的第二个问题是这个解决方案：registros_arraySustancias: [{ unidades: "", contenido: 2, sustanciaActiva: "", registros_arraySustancias_suministro: [{value: [""]}] } ]

【解决方案2】：

在这种情况下，我认为您必须稍微使用角度形式，以便来自前端的数据应该来自相同的结构。 FormGroups 和 FormArayys 会帮助你很多。试着看看这篇文章。 http://www.howilearnt.com/web-development/angular/make-a-json-object-with-angular-forms/

【讨论】：

嗨，所有的表格都是用formgroups和formarrays制作的
是的，这很容易管理。你可以根据this.myForm.value之后的json结构修改你的数据。但这需要很多循环和条件。你可以检查lodash。但是使用有角的形式是最好的选择

【解决方案3】：

这就是我想要的：

mapeado = {
pais: "",
registros_arraySustancias: [{
unidades: "",
contenido: 2,
sustanciaActiva: "",
registros_arraySustancias_suministro: [{value: [""]}]
}
]
}

非常感谢您的帮助

【讨论】：