打字稿，JSON：Mappping嵌套數組總是返回空

Question

我是新來的打字稿，並試圖解析從一個GET請求，它看起來像這樣一個JSON（刪除了一些數據）：

{ 
    "currency_rate":1, 
    "data":[ 
    { 
     "mapIdfrom":"oslo_no", 
     "refr":false, 
     "duration":{ 
     "total":75300, 
     "return":0, 
     "departure":75300 
    }, 
    "flyTo":"STR" 
    } 
    ] 
} 

我正在「 currency_rate「例如，但」數據「 - 陣列是空的。

的GET請求看起來像這樣（只相關部分）：

[...] 
api_url = 'https://api.skypicker.com/flights'; 
[...] 
let body = { 
       flyFrom: 'OSL', 
       to: 'STR', 
       dateFrom: '01%252F04%252F2017', 
       dateTo: '20%2F04%2F2017', 
       daysInDestinationFrom: 15, 
       daysInDestinationTo: 20, 
       returnFrom: '01%2F04%2F2017', 
       returnTo: '20%2F04%2F2017', 
       typeFlight: 'oneway', 
       oneforcity: 0, 
       one_per_date: 0, 
       passengers: 1, 
       adults: 1, 
       children: 0, 
       infants: 0, 
       flyDays: '%5B0%2C1%2C2%2C3%2C4%2C5%2C6%5D', 
       onlyWorkingDays: 0, 
       directFlights: 0, 
       partner: 'picky', 
       partner_market: 'en', 
       v: 2, 
       xml: 0, 
       curr: 'EUR', 
       locale: 'en', 
       price_from: 1, 
       price_to: 10000, 
       dtimefrom: '00%3A00', 
       dtimeto: '00%3A00', 
       atimefrom: '00%3A00', 
       atimeto: '00%3A00', 
       returndtimefrom: '00%3A00', 
       returndtimeto: '00%3A00', 
       returnatimefrom: '00%3A00', 
       returnatimeto: '00%3A00', 
       stopoverfrom: '00%3A00', 
       stopoverto: '00%3A00', 
       booking_token: 'hashed%20data', 
       offset: 0, 
       limit: 30, 
       sort: 'price', 
       asc: 1 
      } 

let bodyString = JSON.stringify(body) 

return this.http.get(`${this.api_url}?${bodyString}`) 
    .map(res => <SkyPickerFlight>res.json()); 

模型 「SkyPickerFlight」 的定義是這樣的：

import { SkyPickerFlightData } from '../models/skyPickerFlightData'; 
import { Observable } from 'rxjs/Rx'; 

export interface SkyPickerFlightI { 
    currency: string; 
    data: Observable<any[]>; 
} 

我也試圖與data: Observable<SkyPickerFlightData[]>，替換data: Observable<any[]>實際的對象，但也不起作用。

在這裏你可以得到完整的GET請求：

https://api.skypicker.com/flights?flyFrom=OSL&to=STR&dateFrom=01%2F04%2F2017&dateTo=20%2F04%2F2017&daysInDestinationFrom=15&daysInDestinationTo=20&returnFrom=01%2F04%2F2017&returnTo=20%2F04%2F2017&typeFlight=oneway&oneforcity=0&one_per_date=0&passengers=1&adults=1&children=0&infants=0&flyDays=%5B0%2C1%2C2%2C3%2C4%2C5%2C6%5D&onlyWorkingDays=0&onlyWeekends=0&directFlights=0&partner=picky&partner_market=en&v=2&xml=0&curr=EUR&locale=en&price_from=1&price_to=10000&dtimefrom=00%3A00&dtimeto=00%3A00&atimefrom=00%3A00&atimeto=00%3A00&returndtimefrom=00%3A00&returndtimeto=00%3A00&returnatimefrom=00%3A00&returnatimeto=00%3A00&stopoverfrom=00%3A00&stopoverto=00%3A00&booking_token=hashed%20data&offset=0&limit=30&sort=price&asc=1 

我仍然在尋找到它，但它看起來像GET請求使用this.http.get( $ {} this.api_url是有點時髦的$ {} bodyString )實際返回：

{"connections":[],"currency":"EUR","del":0,"time":1,"search_params":{"to_type":"anywhere","flyFrom_type":"anywhere","seats":{"infants":0,"passengers":1,"adults":1,"children":0}},"ref_tasks":{},"currency_rate":1.0,"data":[],"refresh":[]} 

與上述GET請求不同的結果。不知道我是否清楚。但是，試圖這樣的GET請求（我將不遺餘力你的URLSearchParams的長定義）的錯誤網關錯誤結束：

return this.http.get(this.api_url, {search: params}) 
    .map(res => res) 

得到任何幫助， 安德烈

----編輯 - ---- 它的工作後，我複製粘貼在整個URL：

return this.http.get(<URL PASTED HERE>) 
    .map(res => res) 

仍想知道如何傳遞一個清晰的方式的參數，而不是在那裏粘貼完整的URL。

謝謝！

Answer 1

問題是GET請求。使用URLSearchParams/RequestOptions沒有工作出於某種原因。保持獲得'壞門'錯誤。所以我直接在HTTP請求中傳遞的URL像這樣：

this.http.get('https://api.skypicker.com/flights?' + bodyStringSerialized) 

使用下面的序列化功能（這個功能我發現帕拉姆值的價值混亂的另一個版本，所以我刪除了編碼）。我用它喜歡這個'序列化（json，''）'：

serialize(obj, prefix) { 
var str = [], p; 
for(p in obj) { 
    if (obj.hasOwnProperty(p)) { 
    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p]; 
    str.push((v !== null && typeof v === "object") ? 
     this.serialize(v, k) : 
     k + "=" + v); 
    } 
} 
return str.join("&"); 
} 

感謝您的幫助！

Answer 2

你的json響應的一部分不會是Observable。

嘗試：

export interface SkyPickerFlightI { 
    currency: string; 
    data: any[]; 
} 

你會得到從http一個Observable<SkyPickerFlightI>這將同時包含currency_rate和data

Answer 3

我不明白什麼是你想通過data: Observable<any[]>;來實現。正如@suraj所說，「你的一部分json響應不會是可觀察的」。

至於答案，我認爲你不需要將響應轉換爲典型的接口。簡單的.map(res => res.json());也可以。我假設你需要這樣，但是，只是爲了讓它更容易。

不確定這裏是否存在問題？所以，你可以這樣做，並檢查數據是否來到你的GET：

return Observable.create(observer => { 
    this.http.get(`${this.api_url}?${bodyString}`) 
     .map(res => res.json()) 
     .subscribe((data) => { 
      console.log("Data : ", data); 
      observer.next(data); 
     }, 
     (err) => { 
      console.log("Error : ", err); 
      observer.error(err); 
     }); 
}); 

檢查是否上面記錄必要的數據。如果確實如此，那麼就像在代碼中一樣，再次通過類型轉換來檢查。

現在，在這裏您將返回一個新的Observable調用方法。所以，你也必須在調用方法中使用subscribe()。