더프앤도프
328
2020-05-12 16:47:23
16
837

자바스크립트 질문있습니다.



ajax를 사용해서 데이터 가져오고 테이블에 출력하는건 완료했습니다.

$.each(result, function(i, values){ 
    console.log(result[i]);
    $('.info_area').append('<tr style = "height:20px">' +
    '<td style = "height:20px">' + values.no + '회</td>' + 
    '<td style = "height:20px">' + values.det_date + '</td>' + 
    '<td style = "height:20px">' + values.address_n + values.address_a + '</td>' + 
    '<td style = "height:20px"><input type = "button" class = "btn btn-default btn-xs" value = "더보기" onclick="gotoMap(\'' +result[i]+   '\');"></td></tr>');
}); 			


더보기 버튼 클릭 시 gotoMap(result[i])을 불러오려고 하는데,

Object를 onclick으로 전달하고 받는건 못하나요??

function gotoMap(obj){
	console.log("value받고 " + obj);
	//location.href = "/map/result.jsp";
}


gotoMap으로 result[i]를 전달하는 방법이 있을까요???

0
  • 답변 16

  • programmerEgg
    1k
    2020-05-12 16:49:34

    console.log 에 obj만찍으셈

  • siva6
    5k
    2020-05-12 16:51:32

    result[i]의 형태에 따라 다르겠지만,
    자라면 i만 넘기고, result에서 찾아서 사용하겠습니다.

  • 더프앤도프
    328
    2020-05-12 16:53:45 작성 2020-05-12 16:54:48 수정됨

    programmerEgg 

    그래도 똑같이 [object Object] 로 출력됩니다 ㅠ 

  • 더프앤도프
    328
    2020-05-12 16:56:44

    siva6

    그렇게 되면 val()로 가져와야 하는데 value = '더보기' 로 가져와져서 혹시 다른 방법이 있을까요??


  • HJOW
    3k
    2020-05-12 16:57:13 작성 2020-05-12 16:57:38 수정됨

    크롬 개발자 도구로 찍어보세요. (크로미움 기반 브라우저는 다됨. 엣지 웨일 스윙 오페라 등등)

    IE의 개발자 도구는 객체를 출력하지 못합니다.

  • RWB
    1k
    2020-05-12 16:57:21

    우선 질문 상에 result[i]라는 객체가 정확히 어떤 객체인지 기술되지 않은 상태에서 이렇다 저렇다 말씀드리기 힘들 것 같습니다.


    혹시 가능하시다면 console.dir(result[i]) 해보실 수 있을까요?


    자바스크립트는 느슨한 데이터 타입이라 말씀하시는 객체가 어떤 건지 먼저 알 필요가 있을 듯 합니다.

  • 전술programmer
    2020-05-12 16:57:46 작성 2020-05-12 17:04:17 수정됨

    버튼을 클릭해서 해당 result[i]에 해당하는 tr태그 안에 있는 정보들을 들고 오고 싶은게 목적이시라면

    버튼 속성으로 

    '<input type="button" class="btn" data-no="' + values.no + '"/>'

    이런식으로 data 속성을 부여하시고

    $('.btn').on("click", function() {
      var no = $(this).attr("data-no");
     .
     .
    });

    이런식으로 클릭한 대상의 버튼속성에 담긴 값들을 변수에 저장하여 해당 데이터 값을 활용할 수 있습니다.

    -1
  • programmerEgg
    1k
    2020-05-12 16:59:00

    onclick에 gotoMap에 \' 이거 없애셈

    왜넣으신건지?

    -1
  • 더프앤도프
    328
    2020-05-12 16:59:35

    HJOW

    크롬 밖에 안씁니다 ㅠㅠㅠ

  • HJOW
    3k
    2020-05-12 17:01:36 작성 2020-05-12 17:05:13 수정됨
    console.log("value받고 " + obj);

    이게 원인인 듯요. (로그 안찍히는 원인)


    console.log(obj); 라고 하면 이게 객체라도 상세히 출력됩니다.

    근데


    "value 받고 " + obj


    라는 걸 하는 순간 강제로 문자열로 변환되면서 중요 정보가 날아갑니다.

    그런고로 앞에 내용 빼고 obj 만 찍어보세요


  • 더프앤도프
    328
    2020-05-12 17:01:43

    programmerEgg 

    저도 처음에는 안넣었는데 

    Uncaught SyntaxError: Unexpected identifier 오류가 나서 검색해보니

    \넣어서 하라는 글을 봤습니다.

    넣어봤는데 위 오류는 안나서 저부분은 나중에 따로 확인해보려고 합니다.

  • programmerEgg
    1k
    2020-05-12 17:04:54
    stringify해서 넣어보셈 result[i]
  • 더프앤도프
    328
    2020-05-12 17:05:16 작성 2020-05-12 17:09:58 수정됨

    HJOW

    아차 싶어서 빼고 찍어 봤습니다만,,

    여전히 
    [object Object] 로 나오는걸로 봐서 아예 전달을 못한다고 생각하고 있습니다.


    RWB 

    typeof 찍으면 object로 나옵니다

  • HJOW
    3k
    2020-05-12 17:09:20 작성 2020-05-12 17:10:40 수정됨

    일단 저렇게 로그가 [object Object]로 뜨는 이유는

    객체가 문자열로 강제 변환이 된거거든요



    gotoMap 함수 호출할 때 매개변수 넣잖아요. 그 때 따옴표로 감쌌다거나, 문자열끼리 덧셈을 했다거나 부분을 점검해보심이...


    지금 사태가, 쌍따옴표 안에 홑따옴표 또 들어가고 막 이래서, 실제로는 어떻게 계산결과가 완성이 될 지 예측이 쉽지 않을거에요... 개발자도구로 브레이크 걸어서 이 시점에서는 이 값이 뭐구나 하면서 점검할 수밖에요

  • lee16
    56
    2020-05-12 17:20:45 작성 2020-05-12 17:33:42 수정됨
    result를 전역변수로 지정 

    <input type = "button" class = "btn btn-default btn-xs" value = "더보기" onclick="gotoMap('+i+');"></td></tr>');
    input의 gotoMap에 키값만 설정 후
    function gotoMap(i) {
        console.log("obj :", result[i]);
    }
    로 확인해보세요
  • 더프앤도프
    328
    2020-05-12 17:28:57


    '<td style = "height:20px"><input type = "button" class = "btn btn-default btn-xs result'+i+'" value = "더보기"></td></tr>');
    
    
    $('.result'+i).on('click',function(){
    	gotoMap(result[i]);
    })
    
    

    result + i(.each의 증감변수) 로 class에 넣어주고 

    onclick 없이, 버튼이 클릭될때 result값을 gotoMap에 던져주는 식으로 해결 해결했습니다.

    더 좋은 방법있으시면 말씀해주시고, 도와주신분들 감사합니다:)

  • 로그인을 하시면 답변을 등록할 수 있습니다.