عرض التسلسل الهرمي JSON/YAML كشجرة في HTML؟

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

سؤال

لدي بيانات YAML التي تبدو من هذا القبيل ، ولكن حوالي 150 كيلو متر:

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

... أو نفس الشيء في JSON:

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

أرغب في تقديم هذا المحتوى في عرض شجرة JavaScripty القابل للتوسيع (أمثلة: 1, 2) لتسهيل استكشاف. كيف أقوم بهذا العمل؟

أعتقد أن ما أريد حقًا معرفة ذلك هو كيفية أخذ بيانات YAML/JSON هذه ، وعرضها تلقائيًا كشجرة (مع مفاتيح التجزئة مرتبة أبجديًا). حتى الآن ، كنت أتعامل مع عرض شجرة يوي, ، لكنها لا تقبل 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

الآن ، فقط قم بتشغيله من خلال معالج تخفيض:

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>

يوي تريفيو يمكن أن تعزز القوائم الحالية ، لذلك نلتف كلها:

<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 إلى تخفيض ، وتحويل العدوى إلى قائمة HTML ، وضعها في قائمة HTML داخل ملف HTML القالب. تم إنشاؤه بواسطة HTML المحسّن تدريجياً / قابلة للتحلل ، لأنه يمكن عرضه بالكامل على غير قابلة للعرض بشكل كامل على غيره على غير قابلة للعرض متصفحات JavaScript كقائمة قديمة واضحة.

نصائح أخرى

يمكنك تحويل بيانات JSON الخاصة بك إلى divs المتداخلة بشكل جيد مع هذا. لم أختبرها بعدد واسع من مجموعات البيانات ، لكن يبدو أنه يعمل.

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

الإصدار 2.6 من Yui's TreeView يأخذ الآن كائن JavaScript ولكن ليس في هذا التنسيق ولن يقوم بفرزه تلقائيًا. سيكون عليك استخدام الأداة المساعدة JSON الخاصة بـ Yui لتحويلها إلى 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