DB 불러오기 시 undefined (reading 'length') 에러

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

DB 불러오기 시 undefined (reading 'length') 에러

undefined주차

문*영

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

팀소개 페이지를 만들던 중 오류가 있어 문의를 남깁니다 ㅜㅜ

GET 방식으로 DB 불러오기 시 console 창에

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

라고 나옵니다ㅜㅜ

즉문즉답에 같은 에러들 확인해보았지만 저랑 케이스가 다른 것 같습니다 ㅠㅠ,, 구글검색해도 해결이 되지 않네요,,

파이선 코드는 아래와 같고, 몽고DB 연결한 코드는 비밀번호가 적혀있어서 지웠습니다 ㅜㅜ

POST는 잘되고, print로 DB 불러왔을 때도 잘 불러와집니다.

console.log(rows)도 콘솔창에 undefined라고 나옵니다,, ㅠㅠㅠ

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('DB연결')
db = client.dbsparta

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/team')
def intro():
   return render_template('team.html')

@app.route('/team/i4')
def t1():
   return render_template('team/jiyoung.html')

# @app.route('/intro/t2')
# def intro():
#    return render_template('t2.html')
#
# @app.route('/intro/t3')
# def intro():
#    return render_template('t3.html')
#
# @app.route('/intro/t4')
# def intro():
#    return render_template('t4.html')
# #

@app.route("/team/i4", methods=["POST"])
def moon_post():
    nr_moon = request.form['ng_moon']
    cr_moon = request.form['cg_moon']

    doc = {
        'name_moon': nr_moon,
        'comment_moon': cr_moon
    }
    db.moons.insert_one(doc)

    return jsonify({'msg':'한마디 완료!🥰'})

@app.route("/team/i4", methods=["GET"])
def moon_get():
    moon_list = list(db.moons.find({}, {'_id': False}))
    return jsonify({'moons': moon_list})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

html 코드는 아래와 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>Onset of Spring</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2014/12/04/14/46/magnolia-trees-556718_960_720.jpg');
            background-position: center 75%;
            background-size: cover;

            color: lightpink;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 10000px;
            margin: 10px auto 20px auto;
            padding-top: 50px;
            padding-bottom: 100px;

            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: center;

            box-shadow: 0px 0px 3px 0px black;
        }
        .mypost2 {
            padding: 10px;
            margin-left:30px;

            box-shadow: 0px 0px 3px 0px black;
        }

        .mypost3 {
            padding: 10px;
            box-shadow: 0px 0px 5px 0px black;
        }

        .mypost4 {
            width: 95%;
            max-width: 10000px;
            margin: 10px auto 20px auto;
            padding-top: 50px;
            padding-bottom: 100px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            box-shadow: 0px 0px 3px 0px black;
        }

        .guest {
            margin: 30px auto 30px auto;
            padding: 30px;
            box-shadow: 0px 0px 3px 0px black;
        }

        .blog:hover {
            color: hotpink;
            cursor: pointer;
            font-weight: bold;
        }

    </style>

    <script>
        $(document).ready(function(){
            show_comment()
        });

        function save_comment() {
            let name_moon = $('#name_moon').val()
            let comment_moon = $('#comment_moon').val()

            $.ajax({
                type: 'POST',
                url: '/team/i4',
                data: {'ng_moon': name_moon, 'cg_moon': comment_moon},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }

        function show_comment(){
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/team/i4",
                data: {},
                success: function (response) {
                    let rows = response['moons']
                    // console.log(rows)
                    for (let i = 0; i < rows.length; i++){
                        let name = rows[i]['name_moon']
                        let comment = rows[i]['comment_moon']

                        let temp_html = `
                                        <div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                                <button>수정</button>
                                                <button>삭제</button>
                                                </blockquote>
                                            </div>
                                        </div>
                                            `

                        $('#comment_list').append(temp_html)

                    }
                }
            });
        }


    </script>

</head>
<body>
    <div class="mypic">
        <h1>Onset of Spring</h1>
    </div>
    <div class="mypost">
        <div class="mypost3">
            <div class="card" style="width: 18rem; float:left; ">
                <img src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8235a3af-1418-4679-90c5-f65ba506bae7%2F%25EB%2593%25A3%25EC%2582%25B0.jpg?table=block&id=43b31f21-ac44-41a9-a521-fd9673c91171&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=1340&userId=f4d4759c-7c92-44fd-8a1e-5031502958cb&cache=v2"
                     class="card-img-top"
                     alt="...">
                <div class="card-body">
                    <p class="card-text">안녕하세요.🌼<br>눈부신 미래를 찾아 내일배움캠프에 참가한 <strong style="color: hotpink">문지영</strong>입니다.
                    </p>
                </div>
            </div>
        </div>
        <div class="mypost2">
            <div class="card" style=" width: 50rem; float:left;">
                <div class="accordion accordion-flush" id="accordionFlushExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseOne" aria-expanded="false"
                                    aria-controls="flush-collapseOne">
                                MBTI
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse"
                             aria-labelledby="flush-headingOne"
                             data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">
                                <p style="font-size: 20pt;">집순이 <strong>ENFP✨</strong></p>
                                <br>ENFP가 집순이가 웬말이냐 하겠지만 MBTI 검사가 ENFP로 나와버렸습니다😂
                                <br>스파크 같은 사람은 아니지만 낯을 가리진 않으니 같이 으쌰으쌰하면서 친하게 지냈으면 좋겠습니다.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseTwo" aria-expanded="false"
                                    aria-controls="flush-collapseTwo">
                                나의 장점
                            </button>
                        </h2>
                        <div id="flush-collapseTwo" class="accordion-collapse collapse"
                             aria-labelledby="flush-headingTwo"
                             data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">
                                <p style="font-size: 20pt;">흔들리지 않는 <strong>침착함🛏</strong></p>
                                <br>간호사로서 응급상황이 많은 병원에서 일해서 일까요?
                                <br>응급 상황에도 시몬스와 같은 침착하게 일을 처리할 수 있는 강철같은 마음을 갖게 되었습니다.
                                <br>느긋함과는 다른, 당황함으로서 발생하는 실수를 줄일 수 있는 장점이라고 생각합니다.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingThree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseThree" aria-expanded="false"
                                    aria-controls="flush-collapseThree">
                                협업하는 나의 스타일
                            </button>
                        </h2>
                        <div id="flush-collapseThree" class="accordion-collapse collapse"
                             aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body"><p style="font-size: 20pt;">당신의 의견을 <strong>존중합니다😄</strong></p>
                                <br>저는 여러 의견에 대해 논의하는 것을 좋아합니다.
                                <br>일을 하면서 느꼈던 것은, 경력자의 의견도 신입의 의견도 모두 가치가 있다는 것입니다.
                                <br>경력자로서의 경험과 노하우, 그리고 신입으로서의 새로운 시각이 있죠.
                                <br>물론 여러 의견이 대립되는 상황이라면 각각의 의견에 대한 장단점을 당시의 상황에 대입하여,
                                <br>서로의 감정이 상하지 않되 합리적인 방향으로 논의하려고 노력합니다.😉
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingfour">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapsefour" aria-expanded="false"
                                    aria-controls="flush-collapsefour">
                                블로그 주소
                            </button>
                        </h2>
                        <div id="flush-collapsefour" class="accordion-collapse collapse"
                             aria-labelledby="flush-headingfour"
                             data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">
                                <p class="blog" onclick="window.open('https://octocoding.tistory.com/')">문어의 개발일지
                                    방문하기🌷</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="mypost4">
        <h2>방명록</h2>
        <div class="guest">
            <div class="mb-3">
                <label class="form-label">이름</label>
                <input type="text" class="form-control" id="name_moon" placeholder="홍길동">
            </div>
            <div class="mb-3">
                <label class="form-label">한마디</label>
                <input type="text" class="form-control" id="comment_moon" placeholder="함께 힘내요!">
            </div>
            <button onclick="save_comment()">기록하기</button>
        </div>

        <div class="guest" id="comment_list">
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨</footer>
                        <button>수정</button>
                        <button>삭제</button>
                    </blockquote>
                </div>
            </div>
        </div>

    </div>

</body>
</html>

댓글 알림