[3nd Project] 카카오 Api로 주차장 구현하기 4

아침부터 헤드에이크에 시달리고 있는 나 .. 

Api부터 아주 새로 시작할 생각에 퀭해진 나

두통의 원인 잡았다 요놈!

이번주에 개발 완료의 목표가 산산조각이 나서 착잡한거지

다시 하려고 해서 슬픈 건 아니야!!!!

나니요.. 나니요... 나니요오오

 

나니요!

 

---

시작해보자 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

주차장 이놈!!!!

 

 

기존 데이터

// 공공데이터 API에서 주차장 리스트 가져오기
function fetchParkingLotData(tabName) {
    $.ajax({
        url: 'http://api.data.go.kr/openapi/tn_pubr_prkplce_info_api',
        data: {
            serviceKey: '', // 공공데이터 포털에서 발급받은 서비스 키
            pageNo: currentPage,
            numOfRows: itemsPerPage,
            type: 'json'
        },
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log("API 응답:", response); // API 응답 데이터 구조 확인
            const data = response.response.body.items.map(item => ({
                name: item.prkplceNm || '이름 정보 없음',
                prkplceSe: item.prkplceSe || '구분 정보 없음',
                prkplceType: item.prkplceType || '유형 정보 없음',
                parkingchrgeInfo: item.parkingchrgeInfo || '요금 정보 없음',
                address: item.lnmadr || item.rdnmadr || '주소 정보 없음',
                phone: item.phoneNumber || '전화번호 정보 없음'
            }));
            originalData = data; // 검색 필터링을 위해 전체 데이터를 저장
            console.log("originalData 확인:", originalData);
            renderParkingList(data, tabName); // 주차장 리스트 표시 함수 호출
        },
        error: function(error) {
            console.error("주차장 데이터를 불러오는데 실패했습니다:", error);
        }
    });
}

 

 

 

새롭게 만난 공공데이터야 안녕!
실시간 구획 수도 주고 너 진짜 짱이야!

// 공공데이터 API에서 주차장 리스트 가져오기
function fetchParkingLotData(tabName) {
    $.ajax({
        url: 'http://apis.data.go.kr/B553881/Parking/PrkSttusInfo',
        data: {
            serviceKey: '',
            pageNo: currentPage,
            numOfRows: itemsPerPage,
            format: 2 // JSON 형식 요청을 위해 format을 2로 설정
        },
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log("API 응답:", response); // API 응답 데이터 구조 확인
            // PrkSttusInfo 배열에서 데이터 매핑
            const data = response.PrkSttusInfo.map(item => ({
                name: item.prk_plce_nm || '이름 정보 없음', // 주차장명
                address: item.prk_plce_adres || '주소 정보 없음', // 주차장 도로명 주소
                latitude: item.prk_plce_entrc_la || '위도 정보 없음', // 위도
                longitude: item.prk_plce_entrc_lo || '경도 정보 없음', // 경도
                totalSpaces: item.prk_cmprt_co || '주차 구획 수 정보 없음' // 총 주차 구획 수
            }));
            originalData = data; // 검색 필터링을 위해 전체 데이터를 저장
            console.log("originalData 확인:", originalData);
            renderParkingList(data, tabName); // 주차장 리스트 표시 함수 호출
        },
        error: function(error) {
            console.error("주차장 데이터를 불러오는데 실패했습니다:", error);
        }
    });
}

// 주차장 리스트 데이터 표시 함수
function renderParkingList(data, tabName) {
    const parkingList = document.getElementById(tabName).querySelector('.parking-list');
    parkingList.innerHTML = ''; // 기존 데이터를 초기화

    data.forEach(item => {
        const parkingItem = document.createElement('div');
        parkingItem.classList.add('parking-item');

        parkingItem.innerHTML = `
            <h3>${item.name}</h3>
            <p>주소: ${item.address}</p> <!-- 주차장 주소 -->
            <p>총 주차 구획 수: ${item.totalSpaces}</p> <!-- 주차 구획 수 표시 -->
        `;

        parkingList.appendChild(parkingItem);
    });
    document.getElementById('page-number').innerText = currentPage; // 현재 페이지 번호 표시
}



// 총 데이터 개수를 가져오는 함수
function fetchTotalCount(callback) {
    $.ajax({
        url: 'http://apis.data.go.kr/B553881/Parking/PrkSttusInfo',
        data: {
            serviceKey: '',
            pageNo: 1,
            numOfRows: 1,
            format: 2 // JSON 형식 요청을 위해 format을 2로 설정
        },
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            const totalCount = response.totalCount;
            if (typeof callback === 'function') {
                callback(totalCount);
            } else {
                console.error("callback이 함수가 아닙니다.");
            }
        },
        error: function(error) {
            console.error("총 데이터 수를 불러오는데 실패했습니다:", error);
            callback(0);
        }
    });
}

 

30분만에 바꿨다 헤헷. 

 

console.log(response)로 전체 응답 데이터를 확인해서 

API 응답:
{
    PrkSttusInfo: Array(5), // 주차장 데이터가 배열로 저장됨
    pageNo: '1',            // 페이지 번호
    resultCode: '0',        // 결과 코드 (0이면 성공)
    totalCount: '1764147',  // 총 데이터 개수
    numOfRows: '5',         // 한 페이지에 표시할 데이터 개수
    ...
}

 

요런 구조들을 하나하나 확인하고 

{
    "response": {
        "header": {
            "resultCode": "00",
            "resultMsg": "NORMAL SERVICE"
        },
        "body": {
            "items": [
                { "name": "Sample Parking", "address": "Sample Address" }
            ],
            "totalCount": 100
        }
    }
}

 

배열을 통해 항목을 확인하는 개념인 것 같다.

안녕!

 

 

이제 지도에 마커가 찍히게 해볼게!!!

해당 주차장 리스트 클릭하면 

요렇게 백지상태로 뜬다. 

헤헷..

 

카카오맵에서 경도와 위도를 거꾸로 받아오고 있는 것 같다.

 

 

 

 

그래서 변수를 줘서 경도에 위도를 받아오게 하고 

위도에는 경도를 받아오게 만들어서 

정확한 위치에 마커가 찍히게 했다!!!!!!!!!!!!!!!!!
야호 소리질러~~~~~~~~~

 

 

 

자 다음

나 실시간으로 api 불러와서 이거 하고 싶은데 
벌써 어렵고요!

 

너 .. 왜 실시간 아니야?
너 로딩 너무 오래 걸려..

이것도 확인해보니까 ,, API 데이터가 있는 경우가 있고 없는 경우가 있어서 결국에는
조건을 걸어서 일부만 노출되게 해야한다. 

이아으ㅏㅁ니

API진짜!!!!!!

그래ㅣ.. 팝업으로 양보해줄게....

히히.. 로딩...히히....

정보 히ㅣ히..

네.........

네.....

네...

네....

id 값 오류와 무한 로딩과 실시간 주차면수를 불러오지 못해 
그냥 날려버렸습니다...

그 전 api로 다시..돌아왔어요!!
야호!!

야야호1!!!!!

야호!!!!!!

 

다시...해보자.....처음부터............
빨리 돌리는게 좋지!!!...그렇지 암..암...암.,..
미