ActiveReportsJS를 위한 올바른 JSON 배열 생성 가이드

추천0

페이지 정보

작성자 MESCIUS폴

작성일 2023-12-18 13:21 조회 86회 댓글 0건

본문

관련링크

ActiveReportsJS는 프론트엔드 리포팅 컴포넌트로, Rest API, OData, GraphQL 를 통해 쿼리(Query)된 JSON 형식의 데이터 연결을 지원하며, 해당 데이터를 코딩 없이도 드래그 앤 드롭으로 원하는 스타일의 보고서를 쉽고 빠르게 만들 수 있도록 리포트 디자이너 프로그램을 제공합니다.

즉, JSON 데이터를 HTTP GET 또는 POST 메소드를 통해서 가져올 수 만 있다면, ActiveReportsJS의 리포트 디자이너와 JavaScript 리포트 뷰어 라이브러리를 통해서 여러분의 웹 솔루션에 리포팅(보고서) 기능을 추가 및 개발할 수 있습니다.

다만 읽어온 JSON 데이터을 통해서 원하는 형태의 시각화 보고서를 만들기 위해서는 ActiveReportsJS에서 데이터 값 각각에서 "데이터 이름"을 통해서 직접 접근하고 컨트롤할 수 있는 구조여야 합니다.

ActiveReportsJS JSON 문법

ARJS에서는 키(Key)와 값(value)의 쌍으로 이루어져 있는 일반적인 모든 JSON의 데이터를 구를 지원 하며, JSON 형태의 데이터라면 ARJS에서 문제 없이 활용이 가능합니다.

[ARJS 지원 JSON 기본구조]

JSON의 문법 형식의 문자열, 숫자, 불리언(boolean), 객체(Object)와 같이 JSON의 기본 구조를 모두 지원합니다.

{"데이터이름(Key)" : 값(Value)}

[ARJS 지원 JSON 배열]

다만, 배열의 경우, ARJS에서는 아래와 같은 형태의 Object(객채) 형태의 배열 만을 지원합니다.

[

 {"데이터이름(Key)" : 값(Value), "데이터이름(Key)" : 값(Value) ... },

 {"데이터이름(Key)" : 값(Value), "데이터이름(Key)" : 값(Value) ...}

]

[ ARJS 지원불가 JSON 배열 구조 ]

간혹 JSON 형식은 만족하지만 리포트에서 사용할 수 없는 JSON 배열 형식을 사용하여 바인딩 에러가 발생하는 경우가 있습니다.

이러한 경우 중 대표적인 사례는 "값 나열로만 이루어진 배열을 포함하는 경우"입니다.

예를 들어, 아래의 Result1, Result2, Result3와 같이 JSON 배열 안에 {"데이터이름" : 값 구조} 형태가 아닌, 여러 값만 포함되어 있는 경우입니다.

[
  {
      "Year": "2021",
      "Month": "11",
      "Day": "23",
      "Result1": [
          11,
          44,
          56
      ],
      "Result2": [
          1,
          4,
          6
      ],
      "Result3": [
          "112.445",
          "23.44",
          "857.1"
      ]
  },
  {
      "Year": "2022",
      "Month": "13",
      "Day": "25",
      "Result1": [
          33,
          45,
          23
      ],
      "Result2": [
          4,
          3,
          6
      ],
      "Result3": [
          "452.5",
          "453.43",
          "85.1"
      ]
  }
]

위에 표현된 배열 모두 JSON 형식에서 벗어나지는 않지만, ARJS에서는 이를 읽을 수 없습니다.

이는 리포트를 작성할 때, 정확한 데이터를 표시하고 시각화 하기 위해서 각각의 값에 대해서 이름을 통해서 접근하고 이를 화면에 렌더링을 하도록 설계가 되어 있기 때문입니다.

또한 모든 각각의 데이터의 활용도를 높히기 위해 "데이터 이름"을 통해서 검색, 필더링, 정렬, 하위 리포트 변수, 차트 범주/계열 등으로 자유롭게 활용이 될 수 있도록 데이터가 재구성 되게 됩니다.

그렇기 때문에, ActiverReports에서 값으로만 이루어진 배열의 값을 보여주기 위해서는, 아래와 같이 객체(Object) 형태의 배열(Array)로 재구성해서 연결을 해주어야 합니다.

[
  {
      "Year": "2021",
      "Month": "11",
      "Day": "23",
      "Resultdata" : [
          {
            "Result1": 11,
            "Result2": 1,
            "Result3": "112.445"
          },
          {
              "Result1": 44,
              "Result2": 4,
              "Result3": "23.44"
          },
          {
              "Result1": 56,
              "Result2": 6,
              "Result3": "857.1"
          }
      ]
  },
  {
      "Year": "2022",
      "Month": "13",
      "Day": "25",
      "Resultdata" : [
          {
            "Result1": 33,
            "Result2": 4,
            "Result3": "452.5"
          },
          {
              "Result1": 45,
              "Result2": 3,
              "Result3": "453.43"
          },
          {
              "Result1": 23,
              "Result2": 6,
              "Result3": "85.1"
          }
      ]
  }
]

이렇게 하면 같은 데이터 이름 + 값 쌍끼리 묶여 있기 때문에 더욱 정확하고 자유로운 리포트 구성이 가능해집니다.

참고 | ARJS 지원 JSON 형식으로 변환

* 해당 내용은 ARJS를 활용하여 리포트 기능 개발 시에 도움을 드리기 위해 참고용으로 제공드리는 내용입니다.

만약 값을 받아오는 JSON 데이터의 배열이 값으로만 이루어져 있다면, 아래와 같은 방법을 고려해 보시기를 권장해 드립니다.

방법1) 데이터 API의 JSON 구조 변경

직접 Rest API, GraphQL, Odata 와 같은 데이터 API를 구성하여 사용하고 있다면, API에서 GET이나 POST 요청 시 데이터를 보내줄 때 배열 구조를 객채(Object) 형식으로 수정하여 보내주는 방법을 고려해볼 수 있습니다.

방법2) JavaScript 코드 단에서 JSON 구조 재구성.

제공되는 데이터를 GET 또는 Post를 통해서 받아와 사용하는 경우, JavaScript 코드 단에서 아래와 같은 과정을 거쳐서 재구하는 방법을 고려해볼 수 있습니다.

1) Fetch 또는 Ajax 명령을 통해서 JSON 데이터를 가져옵니다.

2) JavaScript에서 JSON.Parse() 를 사용하여 JSON 데이터를 파싱합니다.

3) 파싱(Parsing)된 데이터를 Object Array 형태의 JSON으로 다시 구성합니다.

4) 런타임으로 JavaScript에서 코드를 통해 ActiveReportsJS 리포트 양식에 데이터를 바인딩 합니다. (자세히 알아보기)

자체적으로 가지고 있는 데이터를 기반으로 JSON을 구성하실 때 이러한 점을 참고하시어 만드신다면 바인딩 에러 없이 리포트를 만들어 보실 수 있을 것입니다.