एचटीएमएल में एक पेड़ के रूप में JSON/YAML पदानुक्रम प्रदर्शित करें?

मैं YAML डेटा है कि एक तरह से इस तरह दिखता है, लेकिन ~ इसके बारे में 150k:एचटीएमएल में एक पेड़ के रूप में JSON/YAML पदानुक्रम प्रदर्शित करें?

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

... या JSON में एक ही बात:

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

मैं में इस सामग्री प्रस्तुत करना चाहते हैं एक विस्तारणीय जावास्क्रिप्ट HTML पेड़ दृश्य (उदाहरण: 1, 2) इसे अन्वेषण करना आसान बनाता है। मैं यह कैसे करु?

मुझे लगता है कि मैं वास्तव में यह जानना चाहता हूं कि यह वाईएएमएल/जेएसओएन डेटा कैसे लेना है, और स्वचालित रूप से इसे एक पेड़ के रूप में प्रदर्शित करें (हैश कुंजी को क्रमबद्ध रूप से क्रमबद्ध करें)। अब तक, मैं YUI's tree view के साथ झुका रहा हूं, लेकिन यह सीधे JSON स्वीकार नहीं करता है, और कुछ उपयोगी चीज़ों में डेटा को मालिश करने के मेरे कमजोर प्रयासों में काम नहीं लग रहा है।

किसी भी मदद के लिए धन्यवाद।

स्रोत

2008-10-28 Anirvan

मैं अंत में कोड के बारे में 5 लाइनों में यह करने के लिए एक सुपर सुरुचिपूर्ण तरीका के साथ आया था, तथ्य यह है कि सरल YAML Markdown की तरह एक बहुत लग रहा है पर आधारित है। (पर्ल में इस मामले में,)

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

उपयोग regexps शुरू करने --- हटाने, और प्रत्येक पंक्ति पर कुंजी से पहले हाइफ़न डाल करने के लिए:

हम इस के साथ बंद शुरू कर रहे हैं

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

देखा, 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 लाइनों तक काम करता है (मार्कडाउन में वाईएएमएल को चालू करें, मार्कडाउन को एक HTML सूची में बदलें, और उस HTML सूची को टेम्पलेट HTML फ़ाइल के अंदर रखें।जेनरेट किए गए एचटीएमएल की प्रगतिशील रूप से बढ़ी/गिरावट योग्य है, क्योंकि यह गैर-जावास्क्रिप्ट ब्राउज़र पर एक सादे पुरानी सूची के रूप में पूरी तरह से देखने योग्य है।

स्रोत

2008-10-29 16:46:11 Anirvan

यह अच्छा है, लेकिन कृपया ध्यान दें, मार्कडाउन सूचियों को स्पीक संगत होने के लिए प्रति स्तर 4 वर्णों द्वारा इंडेंट किया जाना चाहिए। (2 स्पेस इंडेंट कई प्रस्तुतकर्ताओं में काम करेगा, हालांकि निरंतरता और कोड घोंसले नियमित रूप से काम नहीं करेंगे।) – ocodo

वाईयूआई के वृक्ष दृश्य का संस्करण 2.6 अब जावास्क्रिप्ट ऑब्जेक्ट लेता है लेकिन इस प्रारूप में नहीं है और इसे स्वचालित रूप से सॉर्ट नहीं करेगा। आपको इसे वास्तविक जावास्क्रिप्ट में बदलने के लिए वाईयूआई की JSON उपयोगिता का उपयोग करना होगा, जिसे आपको पार करना होगा। आपके नमूने को इस तरह कुछ में परिवर्तित करना होगा:

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

मुझे शायद कुछ कॉमा या कुछ याद आ रहा है। आपका आने वाला डेटा सॉर्ट नहीं किया जा सकता है, इसलिए आपको प्रत्येक सरणी को सॉर्ट करना होगा। फिर, आपको इस ऑब्जेक्ट को TreeView कन्स्ट्रक्टर के दूसरे तर्क के रूप में पास करने की आवश्यकता है और पेड़ दिखाई देना चाहिए।

स्रोत

2008-10-28 22:27:23 user32225

आप अपने JSON डेटा को अच्छी तरह से घोंसला वाले डीवी में परिवर्तित कर सकते हैं। मैंने इसे विस्तृत संख्या में डेटासेट के साथ परीक्षण नहीं किया है, लेकिन ऐसा लगता है कि यह काम करता है।

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; 
}

स्रोत

2008-10-29 16:11:46

यह सूची लेता है और इसे नेस्टेड divs में बदल देता है, लेकिन divs को एक विस्तारणीय/संक्षिप्त सूची में नहीं बनाता है। – Anirvan

एचटीएमएल में एक पेड़ के रूप में JSON/YAML पदानुक्रम प्रदर्शित करें?

उत्तर

संबंधित मुद्दे