4. API 호출 결과 후처리하기

API연동 기능을 사용할 때 원하는 형태로 변환하여 반환받도록 하겠습니다.

개발 하기

API연동 호출 결과를 Flextudio에서 사용할 수 있는 형태로 변환하는 방법을 배워보겠습니다.

중간확인 결과

이전 챕터에서 중간확인한 결과는 다음과 같습니다.

Flextudio에서 결과를 바로 사용할 수 없는 이유

Flextudio에서 API 연동 결과를 직접 사용하기 어려운 이유는 다음과 같습니다. API 호출 결과가 JSON 형태로 반환되는데, Flextudio에서는 이 결과를 2차원 배열 형태로 변환하여 처리해야 합니다. 실습에서 중간확인시에 API연동 호출결과는 다음과 같습니다.

{
      "destination_addresses": [
        "South Korea, Seoul, Gangseo-gu, Yangcheon-ro, 560 증미"
      ],
      "origin_addresses": [
        "Seoul Station (Subway), 2 Sejong-daero 18-gil, 소공동 Jung-gu, Seoul, South Korea"
      ],
      "rows": [
        {
          "elements": [
            {
              "distance": {
                "text": "15.3 km",
                "value": 15322
              },
              "duration": {
                "text": "30 mins",
                "value": 1820
              },
              "status": "OK"
            }
          ]
        }
      ],
      "status": "OK"
    }

이 데이터는 Flextudio 내에서 자동으로 [[...]] 형태로 래핑되어 2차원 배열로 변환됩니다. 변환된 결과로 컬렉션에 반영될 때 배열은 이너블럭으로 생성되고 JSON은 섹터, JSON 형식의 데이터가 아닌 문자열은 문자 각각이 배열의 인덱스로 나뉘어 처리되어, 예상치 못한 결과가 나타나게 됩니다.

이번 실습에서 사용된 API는 결과 데이터를 컬럼에 배열 형태로 저장하기 때문에 이너블럭으로 생성되고, destination_addresses와 origin_addresses는 배열안에 문자열로 있기때문에 인덱스로 나누어져서 컬렉션에 반영되게 됩니다.

따라서, Flextudio에서 이러한 데이터를 올바르게 처리하고 활용하기 위해서는 추가적인 데이터 형식 변환 작업이 필요합니다.

API연동 호출 결과 형식변환

API 연동 호출 결과를 Flextudio에서 보다 유용하게 사용하기 위해서는 결과 데이터를 애플리케이션에서 처리할 수 있는 형식으로 변환하는 것이 중요합니다. 이를 위해 Result Convert Script를 사용하여 호출 결과를 필요한 정보형태로 적절히 변환할 수 있습니다.

API연동 호출 결과에서 필요한 항목을 다음과같이 변환하는 스크립트를 작성해보겠습니다.

{
    "destination_addresses": "South Korea, Seoul, Gangseo-gu, Yangcheon-ro, 560 증미",
    "origin_addresses": "Seoul Station (Subway), 2 Sejong-daero 18-gil, 소공동 Jung-gu, Seoul, South Korea",
    "distance": 15322,
    "duration": 30,
    "rowElements_status" : "OK"
}

• resultBlocks에 결과값을 사용할 수 있도록 경로명들과 시간, 거리는 상위 항목으로 올리고 불필요한 항목은 삭제하도록 스크립트를 추가합니다.

Result Convert Script는 resultBlocks 변수를 사용하여 API 연동 호출 결과를 사용할 수 있습니다.

이 스크립트는 별도의 반환 없이 resultBlocks에 직접 수정을 적용하며, 이렇게 수정된 항목은 컬렉션에 자동으로 반영됩니다. 필요하지 않은 항목은 다음과 같은 방식으로 제거하여 컬렉션에 반영되지 않도록 할 수 있습니다

delete resultBlocks[i][j].컬럼명;

Result Convert Script

if (resultBlocks && resultBlocks[0][0]) {
    resultBlocks[0][0].destination_addresses = resultBlocks[0][0].destination_addresses[0];
    resultBlocks[0][0].origin_addresses = resultBlocks[0][0].origin_addresses[0];
    if (resultBlocks[0][0].rows && resultBlocks[0][0].rows[0]) {
        resultBlocks[0][0].distance = resultBlocks[0][0].rows[0].elements[0].distance.value;
        resultBlocks[0][0].duration = (resultBlocks[0][0].rows[0].elements[0].duration.value || 0) / 60;
        resultBlocks[0][0].rowElements_status = resultBlocks[0][0].rows[0].elements[0].status;
    }
    delete resultBlocks[0][0].rows;
    delete resultBlocks[0][0].status;
}

결과 확인

디버거를 사용하여 확인한 결과, 데이터가 의도한 형태로 저장되었으며, 이 값들이 화면에 정상적으로 표시되는 것을 확인할 수 있습니다.

챕터 마무리

배운 내용

• API연동 서비스를 사용할 때 Result Convert Script를 사용하여 원하는 형식으로 변환하는 방법에 대해 알아보았습니다.