[Error/JS] 데이터 출력 시 Object로 출력되는 현상

 

 

ajax를 통해 받아온 데이터를 화면에 띄워주기 위해 코드를 작성했더니 object Object로 출력되는 문제가 생겼다.

success: function (data) {
    console.log("data [" + data + "] type [" + typeof data + "]");
    console.log(data);
    console.log(Object.values(data));
    if(data.length > 0) {
        console.log("data true");
        $('#boardList').text(''); //초기화
        Object.values(data).forEach(element => {
            //데이터 입력
            $('#boardList').append("<li>"+element+"</li>");
        });
    }
    else {
        console.log("data false")
        $('#boardList').html("<li>'"+keyword+"'에 대한 검색 결과가 없습니다.</li>")
    }
}

 

이는 toString으로 출력할 수 없기 때문에 Object타입인 element를 object로 출력하는 것이다.

직접 객체에서 값을 꺼내 출력 형식을 만들어야 한다.

let msg = `ID: ${element.bid}, Content: ${element.content}, Writer: ${element.writer}, WriterName: ${element.name}`;
$('#boardList').append("<li>" + msg + "</li>");

 

(백틱 사용 안한 버전)

let msg = "ID: " + element.bid + ", Content: " + element.content + ", Writer: " + element.writer + ", WriterName: " + element.name;
$('#boardList').append("<li>" + msg + "</li>");