堆栈内存溢出
  繁体   English   中英

该服务如何检索 JSON 对象数组？ 为什么不映射到 moel 对象上？

[英]How exactly works this service retrieving a JSON objects array? Why is not mapping on moel objects?

 原文  2020-08-20 14:45:26  5   1    angular/ typescript/ angular-json

问题描述

我是 Angular 的新手，我很怀疑这种情况的具体情况：

在我的组件代码中，我有这样的东西：

orders: Order[];

ngOnInit() {

    this.ordersService.getAllOrders().then(orders => {
        this.orders = orders;
        console.log("RETRIEVED ORDERS: ", orders);
        this.loading = false;
});

如您所见，我首先定义了一个Order model 对象数组。

然后进入ngOnInit()方法，我使用这个getAllOrders()服务方法检索这个数组：

getAllOrders() {
    return this.http.get<any>('assets/json_mock/ordini.json')
        .toPromise()
        .then(res => <Order[]>res.data)
        .then(data => { return data; });
}

这基本上是从 JSON 文件中检索值。

现在...来自 Java 我对它在 Angular\TypeScript 中的工作有些怀疑。 我的想法是我的ordini.json文件中定义的对象必须映射到Order model 对象上。

所以这是我的订单model 界面：

export interface Referent {
  name?: string;
  surname?: string;
  role?: string;
}

export interface Company {
  name?: string;
  vat?: string;
  bu?: BU;
}

export interface BU {
  name?: string;
  code?: string;
}

export interface OrderDetails {
  dataInserimento?: Date;
  commesse?: Array<string>;
  identificativoContrattoHyperlink?: string;
  tipologiaContratto?: string;
  presenzaAQ?: string;
  identificativoAQHyperlink?: string;
  accordoQuadro?: string;
  importoContratto?: number;
  residuoAQ?: number;
  compagineDiAQ?: number;
  quotaPercentualeDiRTI?: number;
  tipologiaDiPartecipazione?: string;
  cig?: string;
  cliente?: string;
  vatCliente?: string
  clienteFinale?: string;
  vatClienteFinale?: string;
  dataSottoscrizioneContratto?: string;
  dataInizioAttivita?: Date;
  dataFineAttivita?: Date;
  statoOrdine?: string;

}

export interface Order {
  id?: number;
  name?: string;

  company?: Company;
  dettaglioOrdine?: OrderDetails;

}

正如您所看到的，我有一个包含一些字段（有时定义为其他接口）的Order接口。

这是我的 JSON 文件内容：

{
  "data": [
    {
      "id": 1,

      "referente": {
        "name": "Mario",
        "surname": "Rossi",
        "complete_name": "Mario Rossi",
        "role": "Operation Manager"
      },

      "company": {
        "name": "TEST S.p.A.",
        "VAT": "IT 03318271214",

        "BU": {
          "name": "Digital Solution",
          "code": "DS"
        }
      },

      "dettaglio_ordine": {
        "data_inserimento": "2020-08-08",


        "commessa": {
          "code": "AAA0001"
        },

        "identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST",
        "tipologia_contratto": "ORDINE",
        "presenza_AQ": true,
        "identificativo_AQ_hyperlink": "LINK-AQ-TEST",
        "accordo_quadro": 12,
        "importo_contratto": 122000,
        "residuo_AQ": 20000,
        "compagine_di_AQ": "COMPAGINE-DI-AQ-TEST",
        "quota_percentuale_di_RTI": 20,
        "tipologia_di_partecipazione": "GARA PUBBLICA",
        "cig": "CIG-TEST-1",
        "cliente": "CLIENTE-TEST-1",
        "vat_cliente": "VAT-CLIENTE",
        "cliente_finale": "CLIENTE-FINALE-TEST-1",
        "vat_cliente_finale": "VAT-CLIENTE-FINALE",
        "data_sottoscrizione_contratto": "8/12/2020",
        "data_inizio_attivita": "2020-08-28",
        "data_fine_attivita": "2020-08-30",
        "stato_ordine": "CHIUSO"
      }
    },

    {
      "id": 2,

      "referente": {
        "name": "Mario",
        "surname": "Rossi",
        "complete_name": "Mario Rossi",
        "role": "Operation Manager"
      },

      "company": {
        "name": "DGS S.p.A.",
        "VAT": "IT 03318271214",

        "BU": {
          "name": "Cyber Security",
          "code": "CS"
        }
      },

      "dettaglio_ordine": {
        "data_inserimento": "2020-08-09",


        "commessa": {
          "code": "AAA0002"
        },

        "identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST",
        "tipologia_contratto": "ORDINE",
        "presenza_AQ": false,
        "identificativo_AQ_hyperlink": "LINK-AQ-TEST",
        "accordo_quadro": 12,
        "importo_contratto": 122000,
        "residuo_AQ": 20000,
        "compagine_di_AQ": "COMPAGINE-DI-AQ-TEST",
        "quota_percentuale_di_RTI": 20,
        "tipologia_di_partecipazione": "GARA PUBBLICA",
        "cig": "CIG-TEST-2",
        "cliente": "CLIENTE-TEST-1",
        "vat_cliente": "VAT CLIENTE TEST",
        "cliente_finale": "CLIENTE-FINALE-TEST-2",
        "vat_cliente_finale": "VAT-CLIENTE-FINALE-TEST",
        "data_sottoscrizione_contratto": "8/12/2020",
        "data_inizio_attivita": "8/28/2020",
        "data_fine_attivita": "8/31/2020",
        "stato_ordine": "CHIUSO"
      }
    },

    {
      "id": 3,

      "referente": {
        "name": "Francesco Nicola",
        "surname": "Romano",
        "complete_name": "Francesco Nicola Romano",
        "role": "Operation Manager"
      },

      "company": {
        "name": "DGS S.p.A.",
        "VAT": "IT 03318271214",

        "BU": {
          "name": "Cyber Security",
          "code": "CS"
        }
      },

      "dettaglio_ordine": {
        "data_inserimento": "2020-08-10",


        "commessa": {
          "code": "AAA0002"
        },

        "identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST",
        "tipologia_contratto": "ORDINE",
        "presenza_AQ": false,
        "identificativo_AQ_hyperlink": "LINK-AQ-TEST",
        "accordo_quadro": 12,
        "importo_contratto": 122000,
        "residuo_AQ": 20000,
        "compagine_di_AQ": "COMPAGINE-DI-AQ-TEST",
        "quota_percentuale_di_RTI": 20,
        "tipologia_di_partecipazione": "GARA PUBBLICA",
        "cig": "CIG-TEST-3",
        "cliente": "CLIENTE-TEST-3",
        "vat_cliente": "XXX123",
        "cliente_finale": "CLIENTE-FINALE-TEST-3",
        "vat_cliente_finale": "YYY321",
        "data_sottoscrizione_contratto": "8/12/2020",
        "data_inizio_attivita": "8/28/2020",
        "data_fine_attivita": "8/31/2020",
        "stato_ordine": "CHIUSO"
      }

    }
  ]
}

基本上这是一个对象数组。 我最初的想法是，.json 文件中的数组中定义的每个 JSON 对象都必须完美映射到Order model 接口描述的 object 上，因为在我的组件中，我将orders变量定义为Order的数组：

orders: Order[];

但它似乎无法以这种方式工作。

我的服务 class 正确检索返回数组的信息，但该数组似乎包含 JSON object 而不是订单字段。

为什么？ 我错过了什么？ map JSON model object object 的正确方法是什么？ 而且它是正确的还是在 Angular 中使用这个 JavaScrip\JSON object 作为 model object 避免这一步？

1 个解决方案

解决方案1
 1 已采纳  2020-08-20 15:02:12

Typescript不会修改您的 object。这些类型仅用于更好地了解数据的形状并防止错误。

所以在这一行中：

   .then(res => <Order[]>res.data)

您只需告诉 typescript “res.data 的内容是 Order[] 类型。从现在开始将它们视为此类”。 由您来定义正确的类型。

如果您需要 map 您的 json 响应以匹配您的类型，您需要做的是：

  • 定义结果类型 ( Order ) 和表示您从 api ( ApiOrder ) 检索的数据的类型

  • 声明执行转换的方法

const transformOrder = (apiOrder: ApiOrder): Order => {
 return { .. your order object ... }
}
  • 在收到数据时执行转换
.then(res => <ApiOrder[]>res.data)
.then(data: ApiOrder[] => { return data.map(transformOrder); });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从 json (Angular) 中的对象数组中检索数据 如何将JSON响应转换为服务中的角度对象数组？ 可观察到对象数组的映射 将值数组映射到对象数组 将 JSON 对象数组解析为 TypeScript 对象数组 如何将数组转换为json数组对象 如何将json对象的单独列表合并为一个对象数组？ ANGULAR - 下面的 EventEmitter 服务是如何工作的？ 组合两个具有完全相同结构的数组对象 过滤json对象数组
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM