My axios return is currently working correctly, displaying the accurate returned data. However, I am facing an issue where the data returned is not grouped by ID. This results in multiple rows being displayed even though there are only a few unique items, as each item's name and comment are returned separately. The problem lies in the fact that I want to display the Name and other top-level data for each ID/Item in an HTML table, while also having the ability to click on it to view more sub-level data like the comment.
For instance, the current return looks something like this:
0:{
item_id: "123",
item_comment_type: "Title",
item_type: "2",
item_comment:"This is an Item"
}
1:{
item_id: "123",
item_comment_type: "Comment",
item_type: "2",
item_comment:"This is a comment"
}
2:{
item_id: "1245",
item_comment_type: "Title",
item_type: "3",
item_comment:"This is a new Item"
}
3:{
item_id: "1245",
item_comment_type: "Comment",
item_type: "3",
item_comment:"This is a new Comment"
}
I would like to have only 2 rows shown for the two items, displaying the item ID and Title at the top level. Clicking on an item should then reveal all associated data, keeping the structure organized by grouping them based on their respective IDs.
Below is the axios call being made:
axios.get('/home/items' )
.then((response) => {
const events = response.data.map(item => {
return {
id: item.item_id,
title: item.item_comment, // if item_comment_type is Title
comment: item.item_comment, // if item_comment_type is Comment
type: item.item_type
};
});
this.dateEvents = events;
this.events = events;
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
});