JSON을 HTML로 변환

JSON은 XML과 달리 XSLT 같은 전용 변환 언어가 존재하지 않지만, JSON을 HTML이나 XML 같은 다른 형식으로 변환하는 데 사용할 수 있는 몇 가지 도구와 방법이 있습니다. XSLT와 유사한 방식으로 JSON을 변환하려면 아래와 같은 접근법을 고려할 수 있습니다.

1. Handlebars.js 또는 Mustache.js와 같은 템플릿 엔진 사용

JSON 데이터를 템플릿 기반으로 HTML에 쉽게 렌더링할 수 있는 템플릿 엔진들이 많이 있습니다. 대표적으로 Handlebars.jsMustache.js가 있으며, 이들은 JSON을 HTML, XML 등 다양한 형식으로 변환하는 데 사용할 수 있습니다.

Handlebars.js 예제

  1. HTML 파일에 Handlebars 템플릿을 작성합니다.

위 코드는 Handlebars.js 템플릿을 사용해 JSON 데이터를 HTML <ul> 리스트로 렌더링하는 예입니다.

2. JSONata – JSON 전용 쿼리 및 변환 언어

JSONata는 JSON 데이터를 가공하고 변환하는 데 특화된 쿼리 언어로, 특정 조건에 따라 JSON 구조를 변경하고 다른 형식으로 내보낼 수 있습니다. 이 언어는 XML의 XSLT와 비슷한 역할을 수행하지만, JSON에만 국한됩니다.

JSONata는 JavaScript 코드 안에서 JSON 데이터를 변환하는 데 사용할 수 있으며, 특히 중첩된 데이터 구조를 쉽게 변환할 수 있습니다. 예를 들어 JSON 데이터를 필터링하거나 특정 형식으로 재구성하는 데 유용합니다.

3. Apache Jolt – JSON 변환 라이브러리

Apache Jolt는 JSON을 다양한 형식으로 변환할 수 있는 Java 라이브러리입니다. XSLT처럼 JSON 문서를 특정 형식으로 변환하는 데 사용되며, JSON 데이터에 규칙을 정의하여 변환 작업을 수행할 수 있습니다.

Jolt는 주로 Java 기반 애플리케이션에서 많이 사용되지만, JSON 데이터를 복잡한 규칙에 따라 다른 구조로 변환하는 데 매우 강력합니다.

4. XSLT와 JSON 변환의 간접적 접근

JSON을 XML로 먼저 변환한 다음, XML에서 XSLT를 사용하여 다른 형식으로 변환하는 방법도 가능합니다. 예를 들어, JSON을 XML로 변환하는 라이브러리(xml-js, json2xml 등)를 사용하고, 그 후 XSLT를 사용하여 XML을 HTML로 변환하는 방식입니다. 이 방식은 다소 복잡하지만 XSLT를 활용하여 JSON을 HTML로 변환하려는 경우에 사용할 수 있는 대안입니다.

요약

  • Handlebars.js / Mustache.js: JSON 데이터를 템플릿에 넣어 HTML로 변환하는 간편한 방식.
  • JSONata: JSON을 가공하고 변환하는 데 특화된 쿼리 언어.
  • Apache Jolt: JSON을 특정 형식으로 변환할 수 있는 Java 라이브러리.
  • JSON to XML + XSLT: JSON을 XML로 변환 후 XSLT로 변환하는 간접적 방식.

이러한 도구와 라이브러리를 사용하면 JSON을 다양한 형식으로 변환할 수 있습니다.

예시

폴더 구조 예시

Html