나루토
265
2022-06-16 14:18:46 작성 2022-06-16 14:37:22 수정됨
10
256

배열 함수 도와주세요 ㅠㅠ



[
  {
    이름: '나루토',
    회차: 0,
    시간: 03:00,
  }
  {
    이름: '나루토',
    회차: 1,
    시간: 04:00,
  }
  {
    이름: '나루토',
    회차: 2,
    시간: 05:00,
  }
  {
    이름: '나루토',
    회차: 3,
    시간: 05:00,
  }
  {
    이름: '사스케',
    회차: 0,
    시간: 03:00,
  }
  {
    이름: '사스케',
    회차: 1,
    시간: 04:00,
  }
  {
    이름: '사스케',
    회차: 2,
    시간: 05:00,
  }
]

위와 같은 데이터를 먼저 받아왔습니다.

제가 '사스케' 사용자인 경우로 보았을 때

아래와 같이 회차와 시간이 출력되어야 합니다.


하지만 불러온 데이터를 보시면 사스케는 회차가 0,1,2회 까지지만 '나루토'는 0,1,2,3 까지 존재합니다.

이런 사용자의 인터페이스도 감안하여
화면 가장 많은 회차만큼 출력합니다. (결국 4회차 까지 출력이 되어야합니다)

여기까지는 출력에 성공을 했는데..

그 회차 옆에 본인(사스케)의 시간이 표출되어야 합니다.
사스케 같은경우는 4회차가 없으니 '-'로 표시합니다

어떻게 로직을 짜야할지 모르겠네요

고수님들 조언 부탁드립니다. ㅠㅠ



아래는 제가 짠 횟수만큼만 출력하는 코드입니다
여기서 본인의 시간을 어떻게 반영시켜야 할지 모르겠습니다 ㅠ

  const raceCount = Object.keys(sum).map((v) => {
    return { name: v, count: sum[v] };
  });
  const busRoundArr = [];
  timetable.map((v) => {
    busRoundArr.push(v.busRound);
  });
  const setRound = new Set(busRoundArr);
  const busRound = [...setRound];
  return (
 <TableBody>
                {busRound.map((data, i) => {
                  return (
                    <>
                      <ListRowOn>
                        <span>{i + 1}회차</span>
                        <span>12:00 - 01:00</span>
                      </ListRowOn>
                    </>
                  );
                })}
              </TableBody>
)



0
  • 답변 10

  • 똥뜨리
    435
    2022-06-16 14:33:03

    문제 이해하기가 어렵네요 ^^..

  • 나루토
    265
    2022-06-16 14:37:42

    @똥뜨리 좀더 글을 수정해 보았습니다 ㅠ

  • 인성 절구로 빻음
    4k
    2022-06-16 14:39:30

    회차로 grouping하시는건 어떠신가요

  • 퀘이사123
    1k
    2022-06-16 14:42:35

    질문을 알아먹게 간단히 써주면 좋을거같네요


    정리하면 주어진 데이터에서 해당 사용자로 화면을 봤을때


    가장 많은 회차수로 데이터가 나와야 한단건가요?


    사스케라면

    1회차  03:00

    2회차 04:00

    3회차 05:00

    4회차 - 

    나루토는

    1회차  03:00

    2회차 04:00

    3회차 05:00

    4회차 05:00

    이렇게?


  • 나루토
    265
    2022-06-16 15:07:21

    @퀘이사123 네 정확합니다 ㅠㅠ

  • 나루토
    265
    2022-06-16 15:08:38

    @인성 절구로 빻음

    그걸 어떻게 그룹핑을 해야할지 감이 안잡혀서요 ㅠㅠ
    이름 중복을 없애주고 어떻게 만들어줘야할지..ㅠ

  • 퀘이사123
    1k
    2022-06-16 15:19:15 작성 2022-06-16 15:22:33 수정됨

    그런거면 인성 절구로 빻음님 말대로 자료를 회차로 다시 정리하는게 쉽습니다.


    기존 배열을 arr이라고 하면 

    const arr2 = arr.reduce((a,b)=>{
       if(Object.keys(a).find(key=> key == b['회차'])){
        a[b['회차']].push(b);
      }else{
        a[b['회차']] = [b];
      }
      return a;
    }, {})


    이런식으로 하면 arr2는 각 회차를 키로하여 그룹화된 오브젝트가 생성될겁니다.


    그러면 arr2의 키의 개수가 최대 회차가 될거고


     arr2의 키의 개수 만큼 반복 돌리면 됩니다.


    반복돌리면서 각 회차의 배열안에서 사용자이름으로 오브젝트를 찾아서 있으면 출력하고


    없으면 - 로 출력하면 됩니다.


  • 나루토
    265
    2022-06-16 15:47:25

    퀘이사123

    그러면 저 값을 출력을 시킬때는 어떻게 시켜야 하나요?ㅠ

    객체로 되어있어서 맵으로는 안돌아가네요 ㅠㅠ

  • 퀘이사123
    1k
    2022-06-16 16:53:20

    회차로 그룹핑된 새로운 객체는 배열이 아니니 당연히 배열 메소드가 돌아가지 않습니다.

    그러니 Object.keys 같은 메소드를 쓰셔야 됩니다.





  • 나루토
    265
    2022-06-17 16:10:34

    퀘이사123 님 ㅠㅠ
    말씀하신대로 이름 같은 값을 출력시켰는데 아닌것을 "-" 로 출력시키는 조건을 넣으면

    이름 같은 값 외의 데이터들이 전부다 "-"으로 출력이 됩니다 ㅠㅠ map을 돌려줘서 인것 같은데요 

    저기 else 부분에 어떻게 넣어야 할까요??


  • 로그인을 하시면 답변을 등록할 수 있습니다.