객체 배열을 다시 새로운 객체 배열!!!! 로 가공 할 때 무엇을 기준으로 새로운 객체 배열을 생성할 건지가 관건!!!

Supabase에서 월 별 데이터를 객체 배열로 받아와서 포장,매장 으로 분류한 후 ,

분류한

포장 ( 객체 배열 ) 배열 ,
매장 ( 객체 배열 ) 배열 을 다시 key 값이 product_name 을 기준으로

같은 product_name을 가진 여러 객체를 하나로 만들어야 한다.

객체 배열을 다시 새롭게 가공한 객체 배열로 만들어야 하는데, 무슨 메소드를 사용할지 한참 고민했다.

• foreach
• map
• reduce
• for of

여러 가지가 있는데 도저히 생각이 안났다.

product_name 을 기준으로 객체들을 하나로 만드는 작업을 해야 하는데....

그러다가

날짜 별로 데이터를 분류 할 때 사용한 Map 함수를 사용하여,
supabase에서 받아온 객체 배열을 foreach 메소드를 사용하여 product_name 을 기준으로 객체 배열로 Grouping 한 후 ,

각 객체 배열을 map 메소드를 이용해서 최종적으로 가공 한다 .

• Map 함수 사용
• foreach 사용해서 Map을 product_name을 기준으로 Grouping
• Grouping 된 Map을 map 을 돌려서 가공하기

이런 순서로 진행 하였다.

Code

// 'togo' 포장 , 'store' 는 매장에서
type OrderType = 'togo' | 'store'
Type Tables<'sales'> =  {
    id: string;
    order_type: string | null;
    product_category: string | null;
    product_ea: number;
    product_name: string | null;
    product_price: number;
    sales_date: string | null;
    store_id: string;
}[]

// 대분류로 filter를 통해서 포장인지 매장인지 먼저 대분류 한다.
const sortedMainIsTogo = (main: Tables<'sales'>[], order_type: OrderType) => {
  const sortedMainData = main.filter(order => order.order_type === order_type);
  const sortedCategoryData = sortedSubIsTogo(sortedMainData);
  return sortedCategoryData;
};

그런 다음에 위에서 보이는 sortedSubIsTogo 를 사용해서 객체의 product_name이 같으면 product_ea 를 누적 시키고,
같지 않으면 새로운 객체를 생성하는 로직을 짰다. ( 하루 종일 삽질하다 아휴 ...)

sortedSubIsTogo 함수

const sortedSubIsTogo = (sub: Tables<'sales'>[]) => {
  // 포장 || 매장 둘 중에 포장 전문점이 있을 수도, 매장전문점이 있을 수도 있으므로
  if (sub.length === 0) return null;
  
  // Map 함수에 'product_name'을 기준으로 Grouping
  const groupByMap = new Map<string, Tables<'sales'>[]>();
  sub.forEach(sales => {
    const productName = sales.product_name!;
    const isAlready = groupByMap.has(productName);
    if (isAlready) {
      groupByMap.get(productName)?.push(sales);
    } else {
      groupByMap.set(productName, [sales]);
    }
  });

  // map 돌려주기
  const result = [...groupByMap.entries()].map(([key, value]) => {
    const productName = key;
    const salesByGroup = value;
    const summary: IsTakeOutType = {
      product_name: productName,
      product_ea: salesByGroup.reduce((acc, cur) => acc + cur.product_ea, 0),
      product_price: salesByGroup[0].product_price,
      original_data: value,
    };
    return summary;
  });
  return result;
};

이렇게 객체 배열을 다시 한번 내가 원하는 객체 배열로 만들 때 가공할 객체는 무엇을 기준으로 하는지 ( Map ) 가 Point인것 같다.