Within my application, I execute an http request that retrieves a JSON object.
To view the structure of the JSON, click here:
{
"6288ba45-3b41-4862-9fed-7271245b9c29": {
"id": "6288ba45-3b41-4862-9fed-7271245b9c29",
"name": "name1",
"possibilities": {
"a48382bf-dde6-479d-8456-beee63f592be": {
"id": "a48382bf-dde6-479d-8456-beee63f592be",
"data": "anydata1",
"style": null
},
"d62fb2d2-58a6-458c-9e7f-78774af4d9fe": {
"id": "d62fb2d2-58a6-458c-9e7f-78774af4d9fe",
"data": "anydata2",
"style": null
}
}
},
"860aefe6-ff70-436b-8d2b-554251e8fb59": {
"id": "860aefe6-ff70-436b-8d2b-554251e8fb59",
"name": "name2",
"possibilities": {
"e30ef32b-20c2-4ddc-8d5f-e5f1fc35a6b7": {
"id": "e30ef32b-20c2-4ddc-8d5f-e5f1fc35a6b7",
"data": "anydata3",
"style": null
},
"49e8b455-848c-4cb2-bb84-5b7b3bc5fc4a": {
"id": "49e8b455-848c-4cb2-bb84-5b7b3bc5fc4a",
"data": "anydata4",
"style": null
}
}
}
}
My code snippet:
return this.http.get(`https://demo6902979.mockable.io/data`)
.map((res: Response) => res.json())
.filter((choices) => choices.id === "6288ba45-3b41-4862-9fed-7271245b9c29")
.subscribe(
data => {
this.Data = data;
console.log('Data:', data);
},
error => {
console.log('Get data failed Error:', error);
}
);
https://i.sstatic.net/Kxn4W.png
Challenges with Filtering
I'm encountering difficulties while attempting to use the 'filter' method on this particular JSON structure in order to isolate the ID "6288ba45-3b41-4862-9fed-7271245b9c29". Unfortunately, it seems ineffective and doesn't return any results.
Trouble Iterating Through JSON Object
Due to the filtering issue, I temporarily remove the filter line and opt to iterate through the JSON object to extract data and style information. To access this data, for instance, using this.Data.possibilities.data (I am unsure how to retrieve possibilities ID to perform operations like
this.Data.possibilities.[UUID].datathis.data.possibilities[0].data).
Navigating through the JSON within my code has proven challenging. The console outputs a JSON-formatted object, leaving me uncertain about the proper iteration method. I have attempted to utilize this.Data.forEach(), but encountered errors as forEach is not supported by the 'this.Data' element.
Most solutions available for Angular2 involve ngFor, yet I need to address this directly within the component class.
Your assistance is greatly appreciated. Thank you.