javascript ajax json 배열 값 출력
본문
$.ajax({
type: "POST",
url: ajax_url,
data: frmData,
dataType: "JSON",
success: function(response) {
let array = new Array();
array = response["data"];
// var data = JSON.parse(response);
console.log(array);
var str = "";
var viewTitle = "";
$('.swiper-wrapper').html('');
$.each( array, function (i, rows){
str += `<div class="swiper-slide">
<a onclick="javascript:find_map('${rows[0]}','${rows[2]}')">
<!-- 이미지 시작 -->
<div class="swiper-slide">
<div class="petroom_img">`;
str += ` </div>
</div>
<!-- 이미지 끝 -->
<h4> `;
+ rows.mapNameArray +
str += `</h4>`;
})
$('.swiper-wrapper').html(str);
},
ajax 코드구요 물론 밑에는 생략하였습니다. console.log로 찍었을때
이렇게 찍히기는 하는데 저 0번 1번 2번 3번 을 어떻게 뿌려줘야하나요? 미치겠습니다
ajax 페이지에서 배열로 담아오긴하는거같은데
rows.mapNameArray 이렇게 출력해도 클릭도안되고.. 제발좀 알려주세요
답변 3
전체적인 부분이 아니어서 정확한 답변을 드리기는 좀 어려울 것 같습니다.
대략적으로 설명을 드리자면 다음과 같이 해볼 수 있을 것 같습니다.
1. 현재 코드에서 rows[0], rows[2] 등으로 배열 내의 값에 접근하고 계신것으로 보입니다. 보다 간단하게 rows.mapNameArray와 같은 형태로 접근할 수 있도록 코드를 수정해 보세요
str += `<div class="swiper-slide">
<a onclick="javascript:find_map('${rows[0][0]}','${rows[1][0]}')">
<!-- 이미지 시작 -->
<div class="swiper-slide">
<div class="petroom_img"></div>
</div>
<!-- 이미지 끝 -->
<h4>${rows[0][0]}</h4>
</a>
</div>`;
2. console.log(array); 를 통해 출력된 결과를 확인해 보시고, 혹시 배열 내의 요소들이 불필요하게 또 다른 배열 안에 묶여 있는지 확인해 보세요. (만약 그렇다면, 불필요한 배열 인덱싱을 제거)
3. 서버에서 전달된 JSON 데이터의 형식이 올바른지 확인해보세요. JSON 데이터의 형식이 잘못되었다면, 데이터를 파싱하는 과정에서 문제가 발생할 수 있습니다.
4. 클릭 이벤트가 정상적으로 동작하지 않는다면, find_map 함수를 확인하여 해당 함수가 올바르게 정의되었는지, 함수 인자가 제대로 전달되었는지를 확인해 보세요
만약 rows[0][0] 등으로 접근해도 원하는 결과가 나오지 않는다면, 데이터 형 변환이 필요할 수도 있을것 같습니다.
예를 들어, rows[0][0]이 숫자로 저장되어 있는 경우 문자열로 변환해주어야 합니다. 이 때에는 String(rows[0][0])과 같이 사용하면 될것 같습니다.
p.s> 서버에서 전달받은 JSON 데이터의 구조와 콘솔 로그 등을 공유해주시면 더 자세한 도움의 댓글이 많을 것으로 생각합니다.
다음 코드가 도움이 될지 모르겠습니다.
<div>dat_0 : <span id="dat_0"></span></div>
<div>dat_1 : <span id="dat_1"></span></div>
<div>dat_2 : <span id="dat_2"></span></div>
<div>dat_3 : <span id="dat_3"></span></div>
<script>
let response = {
"data": [
['대구 가온 센터점'],
['35.8966565323134'],
['128.515153189377'],
['이용가능'],
]
};
let array = new Array();
array = response["data"];
// var data = JSON.parse(response);
console.log(array);
array.forEach((arr, i) => {
let el = arr[0];
let dat = document.getElementById('dat_' + i);
if (dat != null) {
dat.innerHTML = el;
}
});
</script>
each 문 안에서 여러가지 시도해 보세요.
$.each( array, function (i, rows){
console.log( rows );
console.log( rows[i] );
}