JSON 트리 보기

로컬 처리

app.tree.view

다음으로도 #data={"name":"Ada"} 또는 #url=... 데이터를 넣을 수 있으며, 읽은 뒤 주소 표시줄에서 지워집니다.

JSON을 접을 수 있는 트리로 보여 줍니다. 계층이 깊고 필드가 많을 때 순수 텍스트에서 괄호를 찾는 것보다 분명하고, 각 노드의 타입도 볼 수 있습니다. 노드를 누르면 JSONPath를 복사해 테스트나 JSONPath 페이지에서 검증하기 쉽습니다.

관련 없는 분기를 먼저 접고 지금 관심 있는 경로만 보세요. 기본은 얕은 몇 층을 펼치고, 더 깊은 노드는 누르면 됩니다.

객체는 필드 수, 배열은 원소 수를 보여 크기를 가늠하기 쉽습니다.

객체, 배열, 문자열, 숫자, 불리언, null을 구분합니다. "123" 와 123 을 같은 것으로 보지 마세요.

연동 시 백엔드가 실제로 반환한 타입을 확인할 때 맞습니다.

트리는 구조를 맡고, 타임스탬프와 색상 값은 필드 인식 페이지를 쓰세요. 함께 쓰면: 트리에서 경로를 찾은 뒤 잎이 특수 형식인지 봅니다.

읽기 전용 탐색이며, 트리에서 업무 데이터를 직접 고치지 않습니다.

트리로 보기 좋은 데이터

{
  "project": "json-toolbox",
  "config": {
    "theme": "light",
    "limits": { "maxSizeMB": 10 }
  }
}

이렇게 보입니다

 루트는 객체 → config는 객체 → limits는 객체 → maxSizeMB는 숫자. 노드를 누르면 되고 괄호를 셀 필요가 없습니다.

트리에서 값을 바로 고칠 수 있나요?

이 페이지는 보기가 중심입니다. 고친 뒤 검증하려면 포맷 페이지로 돌아가 붙여넣으세요.

아주 크면 어떻게 하나요?

가능하면 JSONPath로 하위 트리를 뽑은 뒤 펼쳐 보세요.

노드를 클릭하면 무엇이 되나요?

해당 노드의 JSONPath(예: $.user.id )를 클립보드에 복사해 어서션을 쓰기 쉽게 합니다.

포맷과 무엇을 먼저 쓰나요?

먼저 유효한 JSON인지 확인하세요. 잘못된 텍스트는 트리를 그릴 수 없으니 검증하거나 포맷하세요.

트리는 「구조 보기」에, JSONPath는 「일괄 값 추출」에 맞습니다. 큰 문서는 둘을 함께 쓰는 것이 전체를 펼치는 것보다 빠릅니다.