• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Node.js, Express 게시판 ajax 삭제기능 반복문 구현에 관한 질문입니다.

ajax 삭제기능 반복문 구현에 관한 질문입니다.

  • 이 주제에는 9개 답변, 3명 참여가 있으며 Leo7 월, 4 주 전에 전에 마지막으로 업데이트했습니다.
10 글 보임 - 1 에서 10 까지 (총 10 중에서)
  • 글쓴이
  • #116051

    이승민
    참가자
    이전에 질문을 남겼으나 못보시고 지나치신 것 같아서 다시 올립니다.
    ajax로 게시판 삭제기능을 구현하던 중 반복문을 사용해보라는 선생님 말씀에 반복문으로 구현을 해보던 중 의문이 생겨 질문드립니다.
    <script>
            for(var i=0; i<'<%=글목록.length%>'; i++){
                document.querySelectorAll('.delete')[i].addEventListener('click', function(){
                    fetch('/delete?docid=<%=글목록[i]._id%>', {
                        method : 'DELETE'
                    })
                })
            }
        </script>
    위와 같이 query string으로 넘길려고 하니 i is not defined 이라는 오류가 떠서 문자열 중간에 변수를 넣어서 그런거라고 생각했습니다.
    그래서
    <script>
            for(var i=0; i<'<%=글목록.length%>'; i++){
                document.querySelectorAll('.delete')[i].addEventListener('click', function(){
                    fetch('/delete?docid=<%=글목록['+i+']._id%>', {
                        method : 'DELETE'
                    })
                })
            }
        </script>
    이렇게 + 기호를 사용해서 문자열 중간에 변수를 넣어서 사용하려고 하
    Cannot read properties of undefined (reading '_id') 이런 오류가 뜨면서 실행이 되지 않습니다.
    dataset을 이용해서 query를 넘기니 문제없이 작동되어 반복문 자체를 잘못 짠 것 같지는 않다고 생각되는데 무슨 문제때문에 오류가 뜨는 건지 궁금합니다
    #116086

    codingapple
    키 마스터
    자바스크립트말고 ejs 반복문쓰면 ejs문법 안에서 i 쓸 수 있을듯요
    아니면 dataset문법쓰면 쉬울 수 있습니다
    #116179

    이승민
    참가자
    ejs 반복문으로 써보던 중 이상한 점이 있어 다시 질문드립니다...
    
    '<%for(var i=0; i<글목록.length; i++){%>'
                '<%console.log(글목록[i].user==userId);%>'
    '<%}%>'
    
    위 반복문의 결과가 false로 나오는데 글목록[i].user와 userId를 각각 출력해보면
    
    new ObjectId("65ec09da28d5692433958774")
    new ObjectId("65ec09da28d5692433958774")
    
    위처럼 똑같은 결과가 출력됩니다. 원래 계획은 반복문 속에서 글목록[i].user와 userId가 같으면 삭제버튼이 보이게 할려고 하였는데
    같은 값을 출력하는 두 개를 비교했을 때 왜 false가 나오는 것인지 궁금합니다.
    #116193

    codingapple
    키 마스터
    위에 userId 변수 정의된 부분이 이상한게 아닐까요
    #116205

    이승민
    참가자
    userId가 서버측에서 넘겨준 정의 자체는 문제가 없는 거 같습니다.
    제 생각에 비교하는 연산을 ejs파일에서 하는 것인데 ejs파일에서는 new ObjectId에 대한 정보? 정의?가 안되어있어서 비교자체가 안되는거 같습니다.
    그래서 일단 임시방편으로
    
    '<%for(var i=0; i<글목록.length; i++){%>'
                '<%if(String(글목록[i].user)==String(userId));%>'
    '<%}%>'
    으로 하니 의도한대로 되는 것 같습니다... 근데 또 문제가 
    '<%for(var i=0; i<글목록.length; i++){%>'
                '<%if(String(글목록[i].user)==String(userId)){%>'
                    '<%document.querySelectorAll(".delete")[i].classList.remove("no_display")%>'
    '<%}}%>'
    
    위처럼 코드를 짜니 document가 정의되어 있지 않다고 오류가 뜨고 그렇다고 document 줄을 그냥
    
    document.querySelectorAll(".delete")[i].classList.remove("no_display")
    
    처럼 일단 자바스크립트처럼 작성하니 i가 undefined가 되버립니다... ejs파일을 처음 다루어보니 이렇게 하는 것이 맞는지도 모르겠네요...ㅠ
    
    1. ejs파일에서 ObjectId 끼리 비교를 하기 위해서는 어떻게 해야할지 궁금합니다.
    
    2. ejs 반복문 속에서 document를 사용할 수 있는 방법이 있을지 궁금합니다.
    
    계속 답변해주시는데 계속 의문점이 생겨서... 귀찮게 해드려서 죄송합니다
    
    
    #116221

    codingapple
    키 마스터
    ObjectId()는 등호로 비교불가능해서 .toString() 뒤에 붙이거나 문자로 변환해서 비교하면 됩니다
    ejs 반복문 안에 자바스크립트 넣으려면 <script></script>쓰고 그 안에 넣읍시다
    
    
    #116287

    이승민
    참가자
    <%for(var i=0; i<글목록.length; i++){%>
            <%if(String(글목록[i].user)==String(userId)){%>'
            <script>
                document.querySelectorAll(".delete")['<%=i%>'].classList.remove("no_display")
            </script>
        <%}}%>
    
    <script></script> 내부에 있는 '<%=i%>' 를 그냥 i로 하면 정의되어 있지 않아도 나와서 혹시나 하고 바꾸니 잘 되었습니다.
    <%%> 사이에 선언되어 있는 변수의 경우에는 ejs파일을 불러올 때 넘긴 데이터(응답.render에서 ejs파일로 넘긴 데이터)처럼 취급이 되는 건가요??
    #116327

    codingapple
    키 마스터
    맞읍니다
    #116348

    이승민
    참가자
    아하 답변해주셔서 감사합니다
    #132380

    Leo
    참가자
    저도매우도움됫어요
10 글 보임 - 1 에서 10 까지 (총 10 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠