कैसे या तो JSON/XML डेटा

मैं इस तरह कुछ डेटा है के लिए जावास्क्रिप्ट में एमएलएम (मल्टी लेवल मार्केटिंग) के लिए एक पेड़ उत्पन्न करने के लिए: (SQL सर्वर एटी)कैसे या तो JSON/XML डेटा

MemberID,ParemtID,Amt,OtherInfo 
1,  NULL, 200,dfdsf 
2,  1,  300,DFDF 
3,  1,  400,DFS 
4,  3,  75,NULL

अब मैं Tree निर्माण की तरह चाहते हैं यह: alt text केवल जेएस का उपयोग कर। ऊपर डेटा जेएसओएन/एक्सएमएल/सीएसवी/स्वरूपित पाठ में पारित किया जा सकता है मैं केवल जेएस में ऐसे गतिशील पेड़ कैसे उत्पन्न कर सकता हूं? कृपया PHP/.NET समाधानों का सुझाव न दें। मैं एक JQuery पसंद करेंगे।

स्रोत

2010-12-18 Pratik

क्या आप कुछ कोड पोस्ट कर सकते हैं। ग्राहक पक्ष में डेटा कैसे प्राप्त किया जाता है? – SuperSaiyan

और, ये रहा:

~~http://jsfiddle.net/vVmcC/~~ http://jsfiddle.net/vVmcC/4/

आप खुद इसे शैली करने के लिए, स्पष्ट रूप से चाहता हूँ। लेकिन यह आपको शुरू करना चाहिए:

var members = [ 
    {memberId : 1, parentId:null, amount:200, otherInfo:"blah"}, 
    {memberId : 2, parentId:1, amount:300, otherInfo:"blah1"}, 
    {memberId : 3, parentId:1, amount:400, otherInfo:"blah2"}, 
    {memberId : 4, parentId:3, amount:500, otherInfo:"blah3"}, 
    {memberId : 6, parentId:1, amount:600, otherInfo:"blah4"}, 
    {memberId : 9, parentId:4, amount:700, otherInfo:"blah5"}, 
    {memberId : 12, parentId:2, amount:800, otherInfo:"blah6"}, 
    {memberId : 5, parentId:2, amount:900, otherInfo:"blah7"}, 
    {memberId : 13, parentId:2, amount:0, otherInfo:"blah8"}, 
    {memberId : 14, parentId:2, amount:800, otherInfo:"blah9"}, 
    {memberId : 55, parentId:2, amount:250, otherInfo:"blah10"}, 
    {memberId : 56, parentId:3, amount:10, otherInfo:"blah11"}, 
    {memberId : 57, parentId:3, amount:990, otherInfo:"blah12"}, 
    {memberId : 58, parentId:3, amount:400, otherInfo:"blah13"}, 
    {memberId : 59, parentId:6, amount:123, otherInfo:"blah14"}, 
    {memberId : 54, parentId:6, amount:321, otherInfo:"blah15"}, 
    {memberId : 53, parentId:56, amount:10000, otherInfo:"blah7"}, 
    {memberId : 52, parentId:2, amount:47, otherInfo:"blah17"}, 
    {memberId : 51, parentId:6, amount:534, otherInfo:"blah18"}, 
    {memberId : 50, parentId:9, amount:55943, otherInfo:"blah19"}, 
    {memberId : 22, parentId:9, amount:2, otherInfo:"blah27"}, 
    {memberId : 33, parentId:12, amount:-10, otherInfo:"blah677"} 

]; 
var testImgSrc = "http://0.gravatar.com/avatar/06005cd2700c136d09e71838645d36ff?s=69&d=wavatar"; 
(function heya(parentId){ 
    // This is slow and iterates over each object everytime. 
    // Removing each item from the array before re-iterating 
    // may be faster for large datasets. 
    for(var i = 0; i < members.length; i++){ 
     var member = members[i]; 
     if(member.parentId === parentId){ 
      var parent = parentId ? $("#containerFor" + parentId) : $("#mainContainer"), 
       memberId = member.memberId, 
        metaInfo = "<img src='"+testImgSrc+"'/>" + member.otherInfo + " ($" + member.amount + ")"; 
      parent.append("<div class='container' id='containerFor" + memberId + "'><div class='member'>" + memberId + "<div class='metaInfo'>" + metaInfo + "</div></div></div>"); 
      heya(memberId); 
     } 
    } 
}(null)); 

// makes it pretty: 
// recursivley resizes all children to fit within the parent. 
var pretty = function(){ 
    var self = $(this), 
     children = self.children(".container"), 
     // subtract 4% for margin/padding/borders. 
     width = (100/children.length) - 2; 
    children 
     .css("width", width + "%") 
     .each(pretty); 

}; 
$("#mainContainer").each(pretty);

यह किसी भी तरह का इष्टतम समाधान नहीं है। पहला लूप प्रदर्शन के लिए एक दुःस्वप्न बन जाएगा जो आप लोड करना शुरू कर देंगे।

स्रोत

2010-12-27 23:29:13

उत्तर के लिए धन्यवाद। लेकिन क्या हमारे पास पेड़ की संरचना नहीं हो सकती है। आपका jsfiddle लिंक केवल रैखिक संरचना दिखाता है। मैं पेड़ की संरचना की तलाश में हूं। जल्द ही आपके उत्तर के लिए देख रहे हैं। – Pratik

यह फ़ायरफ़ॉक्स 3.6 में अच्छी तरह से काम करता है लेकिन आईई 8.0 – Pratik

ओह, ठीक नहीं है। मैंने केवल क्रोम के देव चैनल में परीक्षण किया। उसके लिए माफ़ करना। आईई 8 शायद मार्जिन या फ्लोट या कुछ के साथ एक समस्या है। –

मुझे यकीन है कि यह कोड चलाएगा या नहीं, मैं परीक्षण के बिना यहां बस टाइप कर रहा हूं। और मुझे आशा है कि यह वही है जो आप खोज रहे हैं। (Btw, मैं के लिए-छोरों सरणी-खोज के लिए पारंपरिक शैली है इसका समय हो गया जब से मैं पिछले जावास्क्रिप्ट का इस्तेमाल किया तो थोड़े मैं सरणी कार्यों के लिए w3schools को संदर्भित करना पड़ :-P।।।)

var str = [ 
{memberID : 1, parentId:null, amount:200, otherInfo:"blah"}, 
{memberID : 2, parentId:1, amount:300, otherInfo:"blah1"}, 
{memberID : 3, parentId:1, amount:400, otherInfo:"blah2"}, 
{memberID : 4, parentId:3, amount:500, otherInfo:"blah3"} 
]; 
(function fromArray(arr){ 
var getElemByParent = function(parent){ 
    var elems = []; 
    for (var i=0; i<arr.length; i++){ 
    if (arr[i].parentId == parent) 
    elems.push(arr[i]); 
    } 
    return elems; 
} 
var finalObj; 
var enumFunction = function(node){ 
    node.siblings = getElemByParent(node.memberID); 
    for (var i=0;i<node.siblings.length; i++) 
    enumFunction(node.siblings[i]); 
} 
finalObj = getElemByParent(null); 
enumFunction(finalObj); 
console.log(finalObj); 
return finalObj; 
})(str);

पुनश्च: आपको कई अन्य परिस्थितियों का भी ख्याल रखना होगा। जैसे, यदि डेटा संगत नहीं है तो क्या होगा। मैंने ऊपर दिए गए कोड में उनमें से अधिकांश (बल्कि, सभी) से परहेज किया है।

स्रोत

2010-12-18 06:22:52 SuperSaiyan

कैसे या तो JSON/XML डेटा

उत्तर

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