rxJSの配列を平坦化またはマージする方法

Question

私は1つの同種配列にフラット化したい構造体を持っています。ソース配列は、次のようになります。私は次のようになりますにこれを変換したいと思い何

[ 
    { 
    "countryCode": "CA", 
    "countryName": "Canada", 
    "states": [ 
     { 
     "stateCode": "CAAB", 
     "stateName": "Alberta", 
     "countryCode": "CA", 
     "stateAbbrev": "AB" 
     }, 
     . . . 
     { 
     "stateCode": "CAYT", 
     "stateName": "Yukon Territory", 
     "countryCode": "CA", 
     "stateAbbrev": "YT" 
     } 
    ] 
    }, 
    { 
    "countryCode": "US", 
    "countryName": "USA", 
    "states": [ 
     { 
     "stateCode": "USAK", 
     "stateName": "Alaska", 
     "countryCode": "US", 
     "stateAbbrev": "AK" 
     }, 
     . . . 
     { 
     "stateCode": "USWY", 
     "stateName": "Wyoming", 
     "countryCode": "US", 
     "stateAbbrev": "WY" 
     } 
    ] 
    } 
] 

：

[ 
    { 
    "value": "CA", 
    "label": "Canada" 
    }, 
    { 
    "value": "CACB", 
    "label": "Alberta" 
    }, 
    . . . 
    { 
    "value": "CAYT", 
    "label": "Yukon Territory" 
    }, 
    { 
    "value": "US", 
    "label": "USA" 
    }, 
    { 
    "value": "USAK", 
    "label": "Alaska" 
    }, 
    . . . 
    { 
    "value": "USWY", 
    "label": "Wyoming" 
    } 
] 

は、これまでのところ私が持っている：

let countries:Observable<ICountry[]> = 
    this.http.get<ICountry[]>(`${this.buildProUrl}/states`); 

return countries.map(o => o.map(c => 
    <IStateDropDownItem>{value: c.countryCode, label: c.countryName})); 

それはそこのように思えますそれぞれの国に属する州を結果として得られる観測可能な配列にマージする方法でなければならない。私はconcatMap、mergeMap、switchMapのドキュメントを読んだことがありますが、すべてをまとめておく方法を理解することはできません。

Answer 1

私はあなただけArry.reduce()機能を使用して行うことができ、あなたの結果の配列を処理する必要があると思う：

const data = [ 
 
    { 
 
    "countryCode": "CA", 
 
    "countryName": "Canada", 
 
    "states": [ 
 
     { 
 
     "stateCode": "CAAB", 
 
     "stateName": "Alberta", 
 
     "countryCode": "CA", 
 
     "stateAbbrev": "AB" 
 
     }, 
 
     { 
 
     "stateCode": "CAYT", 
 
     "stateName": "Yukon Territory", 
 
     "countryCode": "CA", 
 
     "stateAbbrev": "YT" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "countryCode": "US", 
 
    "countryName": "USA", 
 
    "states": [ 
 
     { 
 
     "stateCode": "USAK", 
 
     "stateName": "Alaska", 
 
     "countryCode": "US", 
 
     "stateAbbrev": "AK" 
 
     }, 
 
     { 
 
     "stateCode": "USWY", 
 
     "stateName": "Wyoming", 
 
     "countryCode": "US", 
 
     "stateAbbrev": "WY" 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 
console.log(data.reduce((res, curr) => { 
 
    res.push({value: curr.countryCode, label: curr.countryName}); 
 
    return res.concat(curr.states.reduce((res, curr) => { 
 
    res.push({value: curr.stateCode, label: curr.stateName}); 
 
    return res; 
 
    }, [])); 
 
}, []));

新しいのHttpClientを使用している場合は、あなたの回答が既に配列でありますあなたのケースではうまくいくはずです：

let countries:Observable<ICountry[]> = 
    this.http.get<ICountry[]>(`${this.buildProUrl}/states`); 

return countries.map(o => o.reduce((res, curr) => { 
    res.push(<IStateDropDownItem>{value: curr.countryCode, label: curr.countryName}); 
    return res.concat(curr.states.reduce((res, curr) => { 
    res.push(<IStateDropDownItem>{value: curr.stateCode, label: curr.stateName}); 
    return res; 
    }, [])); 
}, []));