I am currently working on a way to display sub Products related to the main product. I have attempted to extract the product code from the URL and then retrieve sub-products that correspond to the main product code.
List of Products and Sub products
const data ={
product:[
{
title:'Product1',
slug:'001',
category:'shirt',
image:'./../../public/image1.jpg',
},
{
title:'Product2',
slug:'002',
category:'shirt',
image:'./../../public/image2.jpg',
},
],
subProduct:[
{
title:'subProduct1',
slug:'001',
image:'./../../public/image01.jpg',
price:70
},
{
title:'subProduct2',
slug:'001',
image:'./../../public/image02.jpg',
price:200
},
{
title:'subProduct3',
slug:'002',
image:'./../../public/image03.jpg',
price:170
},
{
title:'subProduct4',
slug:'002',
image:'./../../public/image04.jpg',
price:150
},
],
}
const slug = '001';
const product = data.product.find(x => x.slug === slug);
const subProducts = data.subProduct.filter(function(x) {
return x.slug == slug;});
console.log(subProducts.title)[enter image description here][1]
the issue is it shows Undefined when I try implement like {subProducts.title}
but when I console.log(subProducts) I get Array of subProducts that match with the slug of the Main Product