After creating a function that returns an object with mapped values, I encountered an issue. The second map is undefined the first time it runs, causing my vue.js component to display data from the first map but not the cutOff value. Strangely, when I refresh the page, the cutoff value appears. I have attempted to rewrite the code without success. It seems like the function doesn't wait for the second map, which involves making a call to supplier details.
groupedProducts() {
const filteredProduct = _.chain(this.products)
.filter((product) =>
!this.selectedSupplier ? true : this.selectedSupplier === product.supplier.id
)
.groupBy((product) => product.supplier.id)
.map((group) => {
const { supplier } = group[0];
return {
products: group,
supplier,
totalProducts: group.length,
_id: supplier.id,
};
})
.value();
},