0

I am working in reactjs I'm confused about the array given below. I need to show the value like this Drinks>Spirits and Drinks>Spirits>Gin from the given array. Can anyone suggest a method to solve this

14: {category_id: "17", name: "Pasta", parent_id: "1", status: "1",…}
15: {category_id: "18", name: "Turkish Breakfast", parent_id: "1", status: "1",…}
16: {category_id: "19", name: "Drinks", parent_id: "1", status: "1",…}
categories: [{category_id: "20", name: "Cocktails", parent_id: "19", status: "1",…},…]
0: {category_id: "20", name: "Cocktails", parent_id: "19", status: "1",…}
1: {category_id: "21", name: "Mocktails", parent_id: "19", status: "1",…}
2: {category_id: "22", name: "Beers", parent_id: "19", status: "1",…}
3: {category_id: "23", name: "Hot Drinks", parent_id: "19", status: "1",…}
4: {category_id: "24", name: "Soft Drinks", parent_id: "19", status: "1",…}
5: {category_id: "25", name: "White Wines", parent_id: "19", status: "1",…}
6: {category_id: "26", name: "Red Wines", parent_id: "19", status: "1",…}
7: {category_id: "27", name: "Spirits", parent_id: "19", status: "1", products: [],…}
categories: [{category_id: "30", name: "Gin", parent_id: "27", status: "1",…},…]
0: {category_id: "30", name: "Gin", parent_id: "27", status: "1",…}
categories: []
category_id: "30"
name: "Gin"
parent_id: "27"
products: [{product_id: "214", name: "Gordon’s", status: "1"},…]
status: "1"
1: {category_id: "31", name: "Rum", parent_id: "27", status: "1",…}
2: {category_id: "32", name: "Whisky", parent_id: "27", status: "1",…}
3: {category_id: "33", name: "Brandy", parent_id: "27", status: "1",…}
4: {category_id: "34", name: "Tequila", parent_id: "27", status: "1",…}
5: {category_id: "35", name: "Vodka", parent_id: "27", status: "1",…}
6: {category_id: "36", name: "Liqueurs", parent_id: "27", status: "1",…}
category_id: "27"
name: "Spirits"
parent_id: "19"
products: []
status: "1"
8: {category_id: "28", name: "Rose Wines", parent_id: "19", status: "1",…}
9: {category_id: "29", name: "Champagnes & Sparkling", parent_id: "19", status: "1",…}
10: {category_id: "38", name: "Raki", parent_id: "19", status: "1",…}
category_id: "19"
name: "Drinks"
parent_id: "1"
products: [{product_id: "224", name: "Bell’s", status: "1"}]
status: "1"
17: {category_id: "87", name: "Juice", parent_id: "1", status: "1", products: [], categories: []}
18: {category_id: "90", name: "Category Testing 50", parent_id: "1", status: "1", products: [],…}

and Sample tree structure of the above array

Tree structure array screenshot

Sample UI screenshot Sample UI of the Result

Improve this question

1 Answer 1

Reset to default
1

How about (check this I did not test it):

const getNames = (drinks) => drinks.map(drink => {
  let hasCategoriers = null
  if (drink.categories){
      hasCategoriers = getNames(drink.categories)
    }
    return {
    drink: drink.name,
    categories: hasCategoriers ? hasCategoriers : null
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The above is just an example of the array . Loop through the array and show the value of categories name show in the order of parent to child (ie, Drinks is parent and child is Spirit etc) and See sample UI above

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.