HTML에서 JSON/YAML 계층을 트리로 표시 하시겠습니까?

StackOverflow https://stackoverflow.com/questions/244601

문제

나는 이와 같이 보이는 YAML 데이터가 있지만 ~ 150K입니다.

---
all:
  foo: 1025
  bar:
    baz: 37628
    quux:
      a: 179
      b: 7

... 또는 JSON에서도 같은 것 :

{"all":{"bar":{"baz":"37628","quux":{"a":"179","b":"7"}},"foo":"1025"}}

이 컨텐츠를 확장 가능한 Javascripty HTML Tree View (예 : 예 : 1, 2) 탐험하기가 더 쉬워집니다. 어떻게해야합니까?

내가 실제로 알아 내고 싶은 것은이 YAML/JSON 데이터를 가져 와서 자동으로 트리로 표시하는 방법입니다 (해시 키를 알파벳순으로 정렬 함). 지금까지 나는 함께 쓰고 있었다 Yui의 나무 뷰, 그러나 그것은 똑바로 JSON을 받아들이지 않으며, 데이터를 유용한 것으로 마사지하려는 연약한 시도는 작동하지 않는 것 같습니다.

도움을 주셔서 감사합니다.

도움이 되었습니까?

해결책 2

나는 마침내 단순하다는 사실을 바탕으로 약 5 줄의 코드 로이 작업을 수행 할 수있는 초대형 방법을 생각해 냈습니다. 얌 많이 비슷해 보입니다 가격 인하.

우리는 이것으로 시작합니다.

---
all:
  foo: 1025
  bar:
    baz: 37628
    quux:
      a: 179
      b: 7

regexps (이 경우 Perl)를 사용하여 시작을 제거하십시오. ---, 각 줄의 키 앞에 하이픈을 넣으십시오.

$data =~ s/^---\n//s;
$data =~ s/^(\s*)(\S.*)$/$1- $2/gm;

Voila, Markdown :

- all:
  - foo: 1025
  - bar:
    - baz: 37628
    - quux:
      - a: 179
      - b: 7

이제 Markdown 프로세서를 통해 실행하십시오.

use Text::Markdown qw( markdown );
print markdown($data);

그리고 당신은 HTML 목록을 얻습니다-깨끗하고 의미 론적, 뒤로 호환됩니다.

<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul></li>
</ul></li>
</ul>

Yui Treeview 기존 목록을 향상시킬 수 있으므로 모든 것을 마무리합니다.

<html><head>
<!-- CSS + JS served via YUI hosting: developer.yahoo.com/yui/articles/hosting/ -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/treeview/treeview-min.js"></script>
</head><body>
<div id="markup" class="yui-skin-sam">
<!-- start Markdown-generated list -->
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul></li>
</ul></li>
</ul>
<!-- end Markdown-generated list -->
</div>
<script type="text/javascript">
var treeInit = function() {
    var tree = new YAHOO.widget.TreeView("markup");
    tree.render();
};
YAHOO.util.Event.onDOMReady(treeInit);
</script>
</body></html>

따라서이 모든 것은 약 5 줄의 코드로 작동합니다 (Yaml을 Markdown으로 바꾸고 Markdown을 HTML 목록으로 바꾸고 HTML 목록을 템플릿 HTML 파일 내에 배치합니다. 생성 된 HTML의 점진적으로 강화 된 / 저하 가능성이 없어서 비 Non에서 완전히 볼 수 있기 때문입니다. -JavaScript 브라우저는 일반 오래된 목록입니다.

다른 팁

JSON 데이터를 이것으로 멋지게 중첩 된 div로 변환 할 수 있습니다. 다양한 데이터 세트로 테스트하지는 않았지만 작동하는 것 같습니다.

function renderJSON(obj) {
    'use strict';
    var keys = [],
        retValue = "";
    for (var key in obj) {
        if (typeof obj[key] === 'object') {
            retValue += "<div class='tree'>" + key;
            retValue += renderJSON(obj[key]);
            retValue += "</div>";
        } else {
            retValue += "<div class='tree'>" + key + " = " + obj[key] + "</div>";
        }

        keys.push(key);
    }
    return retValue;
}

Yui의 TreeView의 버전 2.6은 이제 JavaScript 객체를 사용하지만이 형식은 아니며 자동으로 정렬하지 않습니다. Yui의 JSON 유틸리티를 사용하여 실제 JavaScript로 변환해야합니다. 샘플은 다음과 같은 것으로 변환해야합니다.

{label:"all", children[
    {label:"bar", children:[
        {label:"baz: 37628"},
        {label:"quux", children[
            {label:"a: 179"},
            {label:"b: 7"}
        ]},
        {label:"foo: 1025"}
    ]}
]}

아마 쉼표 나 뭔가를 놓치고있을 것입니다. 들어오는 데이터가 정렬되지 않을 수 있으므로 각 배열을 정렬해야합니다. 그런 다음이 개체를 TreeView 생성자에게 두 번째 인수로 전달하면 트리가 나타나야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top