ajax로 테이블에 행 추가할 때 주의할 점 (Uncaught SyntaxError: Unexpected end of input 에러 해결)

이 에러를 처음 발견했을 때 대체 이게 뭐지... 싶었다.

사실 내가 웹을 제대로 배운 사람이 아니라서 이렇게 모달을 띄우는 게 맞나 싶기도 하다. 

 

내가 ajax로 백엔드에서 넘어온 데이터를 테이블에 한 행씩 추가하기 위해 사용한 코드이다.

(비공개 프로젝트이기 때문에 변수명 등은 임의로 바꿨다)

 

ajax 함수에서 받아온 데이터를 row로 추가하는 코드

테이블에서 한 행을 클릭했을 때 호출되어 모달을 띄우는 코드

이렇게 해도 사실 백엔드에서 넘어온 데이터가 일반적인 문자열이라면 전혀 문제가 없다.

그래서 사실 처음엔 뭐가 문제인지도 몰랐다.

 

그런데 문제는 백엔드에서 넘어오는 값 중 세 번째 값이 일반적인 문자열이 아니었다는 점.

세 번째 값은 어떤 함수를 실행하는지에 대한 데이터이다.

즉, 함수 코드가 넘어온다.

예를 들어 이런 함수가 넘어온다.

 

function (arg) {
    return "arg : " + arg;
}

이런 값이 넘어오면 세미콜론이 문제인지 큰 따옴표가 문제인지 괄호가 문제인지는 모르겠지만 태그의 onClick 속성에 간섭을 일으키면서 SyntaxError가 발생한다.

 

정확히 어느 부분이 문제인지는 추후에 테스트해서 다시 포스팅하겠다.

그래서 해결한 코드는 다음과 같다.

 

ajax 함수에서 받아온 데이터를 row로 추가하는 코드 (수정)

테이블에서 한 행을 클릭했을 때 호출되어 모달을 띄우는 코드 (수정)

스크립트에 변수로 data_를 선언한 뒤 data를 data_에 담았다.

onClick 시에는 매개변수로 key(사실 index이다)를 넘겨 data_에 담긴 값을 설정해준다.

이렇게 하면 태그에 이상한 문자열이 껴서 오류가 발생할 일이 없다.

 

결론

태그에 함부로 문자열을 담는 짓을 하지 말자