javascript ajax json 배열 값 출력

javascript ajax json 배열 값 출력

QA

javascript ajax json 배열 값 출력

답변 3

본문


$.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로 찍었을때

1889015246_1691572458.4481.png

이렇게 찍히기는 하는데 저 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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #ajax ×
전체 406
© SIRSOFT
현재 페이지 제일 처음으로