堆棧內存溢出
  簡體   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  8   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