In the process of developing an Angular application to display articles and votes from my website, I aim to sort them based on their votes. The strategy involves making HTTP calls as follows:
- Initiate an HTTP call to fetch the list of categories along with their respective IDs for updating purposes due to frequent category additions on the website.
- Utilize these IDs to make individual HTTP calls for each ID in order to retrieve the articles associated with that specific category.
- Each article possesses its own unique ID which needs to be stored for subsequent HTTP calls dedicated to each article ID.
- The response object retrieved from step 3 contains a 'users_vote' property requiring the construction of an array to consolidate all votes and subsequently perform sorting operations before displaying the final array in HTML format.
I find it challenging to comprehend how to effectively chain promises, making the code serve as a reference to clarify the concept. Despite recognizing the complexity involved, I am constrained by the inability to introduce changes on the server side at present, compelling me to address the issue within existing parameters.
ngOnInit() {
this.getCategories()
.then((res) => {
this.getIds(res)
.then((res) => {
this.getArticlesList(res)
.then((res) => {
this.mergeArticlesList(res)
})
})
})
}
// 1) Retrieve the categories
getCategories() {
var promise = new Promise((resolve) => {
this.myService.getCategoriesList()
.subscribe((res) => {
this.categories = res;
resolve(this.categories);
})
})
return promise;
}
// 2) Obtain the IDs of categories
getCategoryIDs(res) {
var promise = new Promise((resolve) => {
for (let i=0; i < Object.keys(res).length; i++) {
this.ids[i] = res[i+1]['id']
}
resolve(this.ids)
})
return promise;
}
// 3) Fetch the list of articles under each category
getArticlesList(res) {
var promise = new Promise((resolve) => {
for (let i=0; i < Object.keys(res).length; i++) {
this.myService.getArticlesOfCategory(res[i])
.subscribe((res) => {
this.allarticleslist[i] = res;
})
}
resolve(this.allarticleslist)
})
return promise;
}
// 4) Merge the article IDs
mergeArticleIds(res) {
console.log("Start merging with:")
console.log(res)
console.log(res.length)
console.log(Object.keys(res).length)
for (let i=1; i < Object.keys(res).length -1; i++) {
for (let _i=0; _i < res[i]['reviews'].length; _i++) {
this.mergedArticles = res[i]['reviews'][_i]['id']
}
}
return this.mergedArticles
}
// 5) Retrieve a specific article using its ID
getArticle(res) {
// ??
}
}
An issue arises where console.log(res.length) returns 0, preventing the for loop from initiating. Addressing asynchronous operation timing concerns remains ambiguous, further complicating resolution strategies.
EDIT: Inclusion of getCategoriesList() method from myService:
getCategoriesList(): Observable<any[]> {
let url = 'myurl';
return this.httpClient.get(url)
}
EDIT2: Providing http.get response for getCategoriesList():
{"5":{"description":"","title":"SOCCER""term_id":280,"room_name":"SOCCER"},
"4":{"description":"","title":"NFL","term_id":281,"room_name":"NFL"},
"3":{"description":"","title":"MLB","term_id":282,"room_name":"MLB"},
"2":{"description":"","title":"NHL","term_id":283,"room_name":"NHL"},
"6":{"description":"","title":"TENNIS","term_id":284,"room_name":"TENNIS"},
"1":{"description":"","title":"F1","term_id":285,"room_name":"F1"}}