javascript ajax json 배열 값 출력 채택완료

Copy
$.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개

채택된 답변
+20 포인트

전체적인 부분이 아니어서 정확한 답변을 드리기는 좀 어려울 것 같습니다.

대략적으로 설명을 드리자면 다음과 같이 해볼 수 있을 것 같습니다.

 

1. 현재 코드에서 rows[0], rows[2] 등으로 배열 내의 값에 접근하고 계신것으로 보입니다. 보다 간단하게 rows.mapNameArray와 같은 형태로 접근할 수 있도록 코드를 수정해 보세요

Copy
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 데이터의 구조와 콘솔 로그 등을 공유해주시면 더 자세한 도움의 댓글이 많을 것으로 생각합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

each 문 안에서 여러가지 시도해 보세요.

$.each( array, function (i, rows){

    console.log( rows );

    console.log( rows[i] );

}

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

다음 코드가 도움이 될지 모르겠습니다.

Copy
<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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고