웹 개발 카테고리 반복문 기능 구현 질문드립니다.

Question

웹 개발 독학중인 비전공자 입니다.제가 구현하고 싶은기능은 카테고리 기능입니다. 어떤 기능인지 그림으로 설명드리면이 기능을 구현하려고 하는데 map 함수를 사용해서 구현하려고 합니다.근데 막히는 부분이 카테고리를 map 함수로 돌리면카테고리[0]카테고리[1]카테고리[2]카테고리[3]이렇게 나오게 될텐데 저 map 반복 되는 구간 구간 카테고리 [0]에는 {menucategory:카테고리[0]} 가 포함된 메뉴를 보여줄수있게 또 다른 각각 카테고리에 맞는 메뉴를 반복되게 보여주려고 어떻게 해야할지 모르겠습니다.지식이 부족해서 설명이 잘 안되지만 한 문장으로 설명하면카테고리를 반복문으로 돌리고 각 반복된 카테고리안에 그 카테고리와 동일한 메뉴를 꽂고싶습니다.방법이 어떤게 있는지 궁금합니다.카테고리[0] ----------- 이 사이에 카테고리[0]에 해당되는 도넛을 보여주고 싶습니다카테고리[1]----------- 이 사이에 카테고리[1]에 해당되는 샌드위치를 보여주고 싶습니다카테고리[2]----------- 이 사이에 카테고리[2]에 해당되는 커피를 보여주고 싶습니다카테고리[3]----------- 이 사이에 카테고리[3]에 해당되는 뜨거운 라떼를 보여주고 싶습니다

프2년차 · Accepted Answer

2차원 배열을 사용하시면 될 것 같습니다map을 두번 돌리는거죵

hellooo · Answer

그림대로라면 menu인덱스를 이용해서 storecategory를 출력 해주면 될거 같습니다..

띠로릴링 · Answer

이런 결과를 찾으시나요? 예제 소스 첨부드립니다 export default function App() { const menuData = { menu: [ { menuurl: "www.naver.com", menuname: "Classic Glaz..", menuprice: "1200", menucategory: "Doughnut" }, { menuurl: "www.naver.com", menuname: "Milk Glaz..", menuprice: "1500", menucategory: "Doughnut" }, { menuurl: "www.naver.com", menuname: "Coffee Glaz..", menuprice: "1700", menucategory: "Doughnut" } ], account_id: "11", storecategory: ["Doughnut", "Hot sandwitch", "Coffe"] }; console.log(menuData); return (

{menuData?.menu.map((menu, index) => ( <>

데이터베이스에서 가져온 카테고리 {menuData?.storecategory[index]}

데이터베이스에서 가져온 메뉴 {menu.menuname} 정보

))}

); }상품은 카테고리에 속하는 데이터이기 때문에데이터를 만드실 때 const data = [ { categoryname: 'Doughnut', menu: [ { menuurl: "www.naver.com", menuname: "Classic Glaz..", menuprice: "1200", }, { menuurl: "www.naver.com", menuname: "Milk Glaz..", menuprice: "1600", } ], }, { categoryname: 'Coke', menu: [ { menuurl: "www.naver.com", menuname: "zero coke", menuprice: "1200", }, { menuurl: "www.naver.com", menuname: "pepsi", menuprice: "1600", } ], } ]; return (

{data?.map((category) => (

카테고리명 : {category.categoryname} {category?.menu.map((menuInfo) => ( <>

메뉴명 : {menuInfo.menuname}

메뉴가격 : {menuInfo.menuprice}

))}

);이런 구조로 만드시면 2차배열로 map을 두번사용하실 수 있습니다..

웹 개발 카테고리 반복문 기능 구현 질문드립니다.

3개의 답변

Q&A 목록