CODEWITHSUNDEEP
javascriptreactjsredux
James
James

Reputation: 13

How Can I get the Items of a category with its subcategory

I have two models for Category and subcategory.

The category model returns an array of data like

category = [ 
    {_id: '1', name: 'Appliances', slug: 'appliances'}, 
    {_id: '2', name: 'Computer', slug: 'computer'}, 
    {_id: '3', name: 'Phones', slug: 'phones'}, 
]

The subcategory model returns

subcategory = [
   { _id: '101', name: 'fridge', category: '1'}, 
   {_id: '102', name: 'Radio', category: '1'}, 
   {_id: '103', name: 'Apple', category: '3'}, 
   {_id: '105', name: 'Toshiba', category: '2'}, 
   {_id: '109', name: 'HP', category: '2'}, 
]

I want to return something that looks like this:

[
  {_id: '1', name: 'Appliances, subCategories: [
       { _id: '101', name: 'fridge', category: '1'}, 
       {_id: '102', name: 'Radio', category: '1'}, 
    ] 
  },
  {_id: '2', name: 'Computer, subCategories: [
       {_id: '105', name: 'Toshiba', category: '2'}, 
       {_id: '109', name: 'HP', category: '2'}, 

    ] 
  },
  {_id: '3', name: 'Computer, subCategories: [
       {_id: '103', name: 'Apple', category: '3'}, 
    ] 
  }
]

Here is the code i have so far

const [categories, setCategories] = useState([])
  const [subCategories, setSubCategories] = useState([])

  useEffect(() => {
    loadSubCategories()
  }, [])


  const loadSubCategories = async () => {
    const res = await getAllSubCategories()
    setCategories(res.subCategory)
    setTotal(res.length)
  }


const getAllSubCategories = () => {
  return request('/subCategories', {
    method: 'GET',
  })
}

This only loads my subcategories tho. my category route is /categories

Upvotes: 0

Views: 441

Answers (2)

Sara
Sara

Reputation: 751

category = [ 
    {_id: '1', name: 'Appliances', slug: 'appliances'}, 
    {_id: '2', name: 'Computer', slug: 'computer'}, 
    {_id: '3', name: 'Phones', slug: 'phones'}, 
]

subcategory = [
   { _id: '101', name: 'fridge', category: '1'}, 
   {_id: '102', name: 'Radio', category: '1'}, 
   {_id: '103', name: 'Apple', category: '3'}, 
   {_id: '105', name: 'Toshiba', category: '2'}, 
   {_id: '109', name: 'HP', category: '2'}, 
]

const result = category.map(e => {
    e.subCategories = subcategory.filter(a => a.category == e._id);
    return e;
})

console.log(result);

Upvotes: 2

TebessaDev
TebessaDev

Reputation: 76

const category = [ 
    {_id: '1', name: 'Appliances', slug: 'appliances'}, 
    {_id: '2', name: 'Computer', slug: 'computer'}, 
    {_id: '3', name: 'Phones', slug: 'phones'}, 
];

const subcategory = [
   { _id: '101', name: 'fridge', category: '1'}, 
   {_id: '102', name: 'Radio', category: '1'}, 
   {_id: '103', name: 'Apple', category: '3'}, 
   {_id: '105', name: 'Toshiba', category: '2'}, 
   {_id: '109', name: 'HP', category: '2'}, 
];

const newCategoryArray = category.map(v => {
  const sub = [];
  subcategory.forEach(i => {
    if(i.category === v._id){
      sub.push(i);
    }
  })
  v.subcategory = sub;
  return v;
});

https://playcode.io/873264/

Upvotes: 0

Related Questions