22년 12월 06일 TIL

오늘 한 일 : 새 글 작성 시 선택한 토픽 데이터 가져가게 하기, 서버에서 데이터 받아와서 뉴스피드 붙이기

좌측 topic 버튼을 누르면 각 카테고리에 부여된 value 값을 가져가 하나의 문자열로 합쳐서 받도록 했다.

토픽이 4개 이상이 되면 경고창이 나오게 했다.

작성 완료 버튼을 누르면 제목, 내용, 토픽 데이터를 DB로 가져간다

무슨 이유로 array가 3번 나오는지는 모르겠다..

콘솔 로그를 보면서 rows 의 값이 배열 형태로 나오는걸 확인했다.

받아온 데이터를 변환하는 방법을 몰라 일단 하나씩 입력했다.

결과 : 받아온 데이터가 입력된 뉴스피드들이 들어왔다.

$(document).ready(function () {
    show_all_posting()
});


function topic_value_get() {
    const topic_values = [];
    var topic = $("input[name='topic']:checked");
    for (let i = 0; i < topic.length; i++) {
        topic_values.push(topic[i].value);
        if (topic_values.length > 3) {
            alert('토픽은 3개까지 설정 가능합니다.')
            return
        }
    }
    let topic_value_join_string = topic_values.join(' ')
    console.log(topic_value_join_string)
    return topic_value_join_string
}

function new_posting() {
    let title = $('#posting_title').val();
    let text = $('#posting_text').val();
    let topic = topic_value_get()
    console.log(topic)
    let user = 5
    $.ajax({
        type: 'POST',
        url: '/mypage/newsfeed',
        data: {
            user_id_give: user,
            posting_title_give: title,
            posting_text_give: text,
            posting_topic_give: topic
        },
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}

function show_all_posting() {
    $.ajax({
            type: "GET",
            url: "/main",
            data: {},
            success: function (response) {
                let rows = response['posting__box']
                console.log(rows)
                for (let i = 0; i < rows.length; i++) {
                    let user_id = rows[i][8]
                    let user_email = rows[i][10]
                    let posting_title = rows[i][4]
                    let user_desc = rows[i][12]
                    let topic_num_0 = rows[i][16]
                    let topic_num_1 = rows[i][17]
                    let topic_num_2 = rows[i][18]
                    let temp_html = `<div class="newsfeed__newsfeed">
                                            <div class="newsfeed__info">
                                                <a href="#" class="membersCards__list__eachCards newsfeed__writer">
                                                    <div class="eachCards__inner-content-wrapper">
                                                        <div class="eachCards__avatar"></div>
                                                        <div class="eachCards__info">
                                                            <div class="eachCards__info__id">${user_id}</div>
                                                            <div class="eachCards__info__email">${user_email}</div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <button id="open" class="newsfeed__previewCard">
                                                <div class="previewCard__image"></div>
                                                <div class="previewCard__contents">
                                                    <div class="previewCard__header">${posting_title}</div>
                                                    <div class="previewCard__desc">
                                                        ${user_desc}
                                                    </div>
                                                    <div class="previewCard__topics">
                                                        <div class="previewCard__topics__tag">${topic_num_0}</div>
                                                        <div class="previewCard__topics__tag">${topic_num_1}</div>
                                                        <div class="previewCard__topics__tag">${topic_num_2}</div>
                                                    </div>
                                                </div>
                                            </button>
                                        </div>`
                    $('#newsfeed__expansion').append(temp_html)
                }
            }
        }
    )
}

 

오늘은 많은걸 한거 같은데 많은걸 안했다.. 뭐지?