[TIL] 20230518 - 클릭 시 해당 인덱스 번호 가져오기, 인덱스 번호와 같은 번호의 데이터 키 값들 가져오기!

 

function listing() {
    fetch('/members').then((res) => res.json()) .then((data) => {
        let rows = data['result']
        $('.team-member').empty()
        rows.forEach((a)=>{
            let name = a['name']
            let position = a['position']
            let mbti = a['mbti']
            let hobby = a['hobby']
            let img = a['img']

            let temp_html = `<div class="member-list" >
                                <div class="member-img"><img src="${img}" /></div>                
                                <div class="member-info">
                                    <h5 class="mem-name">${name}</h5>
                                    <p class="mem-posi">포지션 : ${position}</p>
                                    <p class="mem-mbti">MBTI : ${mbti}</p>
                                    <p class="mem-hobby">취미 : ${hobby}</p>

                                    <button class="more-btn" onclick="open_popup()">More</button>
                                </div>
                            </div>`
            $('.team-member').append(temp_html);

            const boxs = document.querySelectorAll(".member-list");
            boxs.forEach((el, index) => {
                el.onclick = () => {
                    
                    $('#popup').show();
                    console.log(index);
                    let rowData = rows[index]
                    console.log(rowData)
                    $('.member-contents').empty();
                    rowData.forEach((a)=>{
                        let name = a['name']
                        let position = a['position']
                        let mbti = a['mbti']
                        let hobby = a['hobby']
                        let email = a['email']
                        let git = a['git']
                        let blog = a['blog']
                        let img = a['img']
            
                        let temp_html2 = `<div class="pop-img">
                                            <img src="${img}" alt="멤버 이미지" />
                                        </div>
                                        <div class="pop-info">
                                            <h5 class="mem-name">${name} </h5>
                                            <p class="mem-posi">포지션 : ${position}</p>
                                            <p class="mem-mbti">MBTI : ${mbti}</p>
                                            <p class="mem-hobby">취미 : ${hobby}</p>
            
                                            <p class="mem-mail">이메일 : ${email}</p>
                                            <p class="mem-git"><a href="https://github.com/${git}"> Git ID : ${git}</a></p>
                                            <p class="mem-blog"><a href="${blog}" > Blog : ${blog}</a></p>
                                        </div>  `
                        $('.member-contents').append(temp_html2);
                    })
                }
            });
            
        })            
    });
}

문제의 코드!!

rowData.forEach((a)=>{}) 이부분이 계속 오류가뜸

아침에 다시 깨끗한 머리로 보니 바로 해결!ㅎㅎ

물론 어제 팀원분의 힌트로 ㅠㅠ

데이터 리스트가 한개이니까 forEach를 돌릴 필요가 없었다.

그냥  rowData의 키값들만 가져오면 되었던겄!!!!

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

해결코드

function listing() {
    fetch('/members').then((res) => res.json()) .then((data) => {
        let rows = data['result']
        $('.team-member').empty()
        rows.forEach((a)=>{
            let name = a['name']
            let position = a['position']
            let mbti = a['mbti']
            let hobby = a['hobby']
            let img = a['img']

            let temp_html = `<div class="member-list" >
                                <div class="member-img"><img src="${img}" /></div>                
                                <div class="member-info">
                                    <h5 class="mem-name">${name}</h5>
                                    <p class="mem-posi">포지션 : ${position}</p>
                                    <p class="mem-mbti">MBTI : ${mbti}</p>
                                    <p class="mem-hobby">취미 : ${hobby}</p>

                                    <button class="more-btn" onclick="open_popup()">More</button>
                                </div>
                            </div>`
            $('.team-member').append(temp_html);

            const boxs = document.querySelectorAll(".member-list");
            boxs.forEach((el, index) => {
                el.onclick = () => {
                    
                $('#popup').show();
                console.log(index);
                let rowData = rows[index]
                console.log(rowData)
                
                $('.member-contents').empty();
                    let name = rowData['name']
                    let position = rowData['position']
                    let mbti = rowData['mbti']
                    let hobby = rowData['hobby']
                    let email = rowData['email']
                    let git = rowData['git']
                    let blog = rowData['blog']
                    let img = rowData['img']
        
                    let temp_html2 = `<div class="pop-img">
                                        <img src="${img}" alt="멤버 이미지" />
                                    </div>
                                    <div class="pop-info">
                                        <h5 class="mem-name">${name} </h5>
                                        <p class="mem-posi">포지션 : ${position}</p>
                                        <p class="mem-mbti">MBTI : ${mbti}</p>
                                        <p class="mem-hobby">취미 : ${hobby}</p>
        
                                        <p class="mem-mail">이메일 : ${email}</p>
                                        <p class="mem-git"><a href="https://github.com/${git}"> Git ID : ${git}</a></p>
                                        <p class="mem-blog"><a href="${blog}" > Blog : ${blog}</a></p>
                                    </div>  `
                    $('.member-contents').append(temp_html2);
                }
            });
            
        })            
    });
}

 

무사히 클릭시 팝업 뜨는것 완료!

 

그런데.. 지금은 한정적인 데이터이고 순서가 바뀌거나 하지않아서 가능하지만

추후 그런상황이 생기면... 제대로 불러올 수 없을 것 같다..

 

그리고 우리는 팀별로 역할 분담을 하지않았고

각자 메인, 팝업 상세페이지를 만들어보고 서버로 데이터 주고 받기도 해보기로 했었기때문에

금일 아침에 의논을해서 팀원 한명의 작업파일로부터 업데이트를 진행햇다.

각자 역할 분담을해서 서버쪽 수정하기, 또는 이미지 작업, 또는 css수정 등으로 나눠서

작업을 했다.

 

그 코드를 합치고 부족한 부분은 조금씩 수정하고

아직 쫌 부족한 서버와 클라이언트 연결부분은 진행중!

오늘 마무리하고 영상을 찍기로!

 

 

---

그 외 추가로 계속 공부해볼것
아이디 부여 해보기 !

GET 요청시에 파이몽고에서 생성되는 아디값까지 가져오려고

all_members = list(db.members.find({},{'_id':False}))

,{'_id':False}를 지웠다

그러니까 오류가 난다!

이유는 파이몽고의 Objectid는 문자열이 아니기때문에

파이썬이 읽을 수 없음

파이썬이 읽을 수 있도록 패키지를 쓰고, 그 아이디를 string으로 변경해야함!

 

리스트를 포문을 돌려야함

for [변수1] in [문자열1, 리스트1, 튜플1]:

	[수행부분]

	for [변수2] in [문자열2, 리스트2, 튜플3]:

		[수행부분]

...

쩜쩜쩜..........

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

 

 

 

오늘은 깃도 내 레파지토리랑 팀 레파지토리 와따가따하면서 연결했다가 끊고 했는데

레파지토리 링크를 못찾아서 헤멧는데

코드 버튼 누르면 있다!

git fetch가 잘안된다 깃을 좀더 쉽게 다룰 수있게 더 많이 써봐야겟다

 

팀작업 merge를 안해봐서 조금 아쉽지만 차차 더 익숙해 지겠지

 

팀작업 너무 재미나댱

 

POST, GET도 더 공부해야겠다