特定のコンポーネントのAngular7プロジェクトでは、APIを介してwpサイトとdotnetサイトからデータを取得する必要があります。wp apiからデータを次のように取得しています（コンソールログデータ）：
(2) [{…}, {…}]
0: {title: "Henk WJ Ovink", description: "Special Envoy for International Water Affairs, Kin…ands, and Sherpa to the High Level Panel on Water", slug: "http://siwidev.websearchpro.net/press/", image: "http://siwidev.websearchpro.net/wp-content/uploads/2019/03/636385501414087698.png", imageWidth: 1903, …}
1: {title: "Amina J. Mohammed", description: "Deputy Secretary-General United Nations", slug: "http://siwidev.websearchpro.net/community/", image: "http://siwidev.websearchpro.net/wp-content/uploads/2019/03/h20fddcc.jpg", imageWidth: 776, …}
length: 2
__proto__: Array(0)
dotnet apiからデータを（コンソールログデータ）として取得しています：
(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: 8342, title: "Panaceas or painkillers – what role for sustainability assessment tools?", description: null, slug: "8342-panaceas-or-painkillers---what-role-for-sustainability-assessment-tools", image: "https://siwi.websearchpro.net/Content/ProposalReso…g-2019-8342-tn-img-2019-8605-iStock-500553193.jpg", …}
1: {id: 8380, title: "Inclusive Policy and Governance for Water and Sanitation ", description: null, slug: "8380-inclusive-policy-and-governance-for-water-and-sanitation", image: "https://siwi.websearchpro.net/Content/ProposalReso…019-8420-img-2019-8420-org-InkedPhoto IWRM_LI.jpg", …}
2: {id: 8464, title: "Cities4Forests: 50 cities commit to forests citing water benefits", description: null, slug: "8464-cities4forests-50-cities-commit-to-forests-citing-water-benefits", image: "https://siwi.websearchpro.net/Content/ProposalReso…464-tn-img-2019-8481-WESCA illegal FS dumping.jpg", …}
3: {id: 8474, title: "Urban water resiliency: a coordinated response from source to settlement ", description: null, slug: "8474-urban-water-resiliency-a-coordinated-response-from-source-to-settlement", image: "https://siwi.websearchpro.net/Content/ProposalResources/Image/Default/default-www-tn.jpg", …}
4: {id: 8526, title: "Including all: participatory approaches in water governance and programmes ", description: null, slug: "8526-including-all-participatory-approaches-in-water-governance-and-programmes", image: "https://siwi.websearchpro.net/Content/ProposalReso…ge/2019/Thumbnail/img-2019-8526-tn-Field trip.JPG", …}
length: 5
__proto__: Array(0)
次に、これら2つの配列をマージし、配列要素をシャッフルして表示する必要があります。私がこれまでにしたこと：
public merge_array : Array<{ }> = [];
/* wp api */
this.accountService.getKeynote( wp_params ).then( ( response: any ) => {
this.merge_array ? this.merge_array : [];
this.wp_data_array = response.data;
for ( let value of this.wp_data_array ) {
this.merge_array.push( value );
};
});
/* dot net api */
this.accountService.getConferences( params ).then( ( dotnetresponse: any ) => {
if ( dotnetresponse.status == 'Ok' ) {
this.merge_array ? this.merge_array : [];
this.dotnet_data_array = dotnetresponse.conferences;
for ( let value of this.dotnet_data_array ) {
this.merge_array.push( value );
};
}
});
しかし、ここでログ 'merge_array'をコンソールすると、結果は次のようになります。
[]
0: {title: "Henk WJ Ovink", description: "Special Envoy for International Water Affairs, Kin…ands, and Sherpa to the High Level Panel on Water", slug: "http://siwidev.websearchpro.net/press/", image: "http://siwidev.websearchpro.net/wp-content/uploads/2019/03/636385501414087698.png", imageWidth: 1903, …}
1: {title: "Amina J. Mohammed", description: "Deputy Secretary-General United Nations", slug: "http://siwidev.websearchpro.net/community/", image: "http://siwidev.websearchpro.net/wp-content/uploads/2019/03/h20fddcc.jpg", imageWidth: 776, …}
2: {id: 8342, title: "Panaceas or painkillers – what role for sustainability assessment tools?", description: null, slug: "8342-panaceas-or-painkillers---what-role-for-sustainability-assessment-tools", image: "https://siwi.websearchpro.net/Content/ProposalReso…g-2019-8342-tn-img-2019-8605-iStock-500553193.jpg", …}
3: {id: 8380, title: "Inclusive Policy and Governance for Water and Sanitation ", description: null, slug: "8380-inclusive-policy-and-governance-for-water-and-sanitation", image: "https://siwi.websearchpro.net/Content/ProposalReso…019-8420-img-2019-8420-org-InkedPhoto IWRM_LI.jpg", …}
4: {id: 8464, title: "Cities4Forests: 50 cities commit to forests citing water benefits", description: null, slug: "8464-cities4forests-50-cities-commit-to-forests-citing-water-benefits", image: "https://siwi.websearchpro.net/Content/ProposalReso…464-tn-img-2019-8481-WESCA illegal FS dumping.jpg", …}
5: {id: 8474, title: "Urban water resiliency: a coordinated response from source to settlement ", description: null, slug: "8474-urban-water-resiliency-a-coordinated-response-from-source-to-settlement", image: "https://siwi.websearchpro.net/Content/ProposalResources/Image/Default/default-www-tn.jpg", …}
6: {id: 8526, title: "Including all: participatory approaches in water governance and programmes ", description: null, slug: "8526-including-all-participatory-approaches-in-water-governance-and-programmes", image: "https://siwi.websearchpro.net/Content/ProposalReso…ge/2019/Thumbnail/img-2019-8526-tn-Field trip.JPG", …}
length: 7
__proto__: Array(0)
マージ配列の長さは0になります。これを解決することはできません。配列の初期化または配列のプッシュに関して何が間違っていますか。どんな助け/提案も歓迎します。
Promisesの戻りは非同期で動作するため、配列が空になるのは当然のことです。したがって、値をログに記録した時点では、両方の配列は空になります。
あなたがする必要があるのはPromise.allを使うことです。ドキュメントによると、
Promise.all（）メソッドは、イテラブルとして渡されたすべてのプロミスが解決されたとき、またはイテラブルにプロミスが含まれていないときに解決される単一のPromiseを返します。それは拒否する最初の約束の理由で拒否します。
ここでできることは、Promise.allを使用して両方の要求からのpromiseを解決し（promiseconsole.log(response)が実際に解決され、値が返されることを確認するために使用できます）、次にspread構文を使用して両方の配列をマージすることです。次に、ここでLaurens Holstが提供するアルゴリズムを使用して、配列をランダムに再シャッフルします。これにより、結果のシャッフルされた配列が得られます。
const getKeynote = this.accountService.getKeynote(wp_params);
const getConferences = this.accountService.getConferences(params);
Promise.all([getKeynote, getConferences]).then(response => {
//console.log(response);
const merged = [...response[0], ...response[1]];
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
};
shuffleArray(merged);
console.log(merged);
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加