नेस्टेड JSON को जावास्क्रिप्ट

के साथ एक HTML नेस्टेड सूची में बदलना मैं जेएसओएन (एक्सएमएल के विपरीत के रूप में) का उपयोग करने के लिए काफी नया हूं और वर्तमान में जावास्क्रिप्ट के साथ पूरी तरह से काम कर रहा हूं ताकि मैं अपने लौटे हुए JSON डेटा को पचाने, पार्स और प्रदर्शित कर सकूं।नेस्टेड JSON को जावास्क्रिप्ट

मैं JSON2.js पुस्तकालय का उपयोग कर रहा है और एक काफी सरल नेस्टेड सूची का प्रतिनिधित्व कुछ वैध JSON डेटा वापस हो रही है:

{ 
    "node":{ 
    "class":"folder", 
    "title":"Test Framework", 
    "node":{ 
     "class":"folder", 
     "title":"Item 1", 
     "node":{ 
     "class":"folder", 
     "title":"Item 1.1", 
     "node":{ 
      "class":"file", 
      "title":"Item 1.1.a" 
     } 
     }, 
     "node":{ 
     "class":"folder", 
     "title":"Item 1.2", 
     "node":{ 
      "class":"file", 
      "title":"Item 1.2.a" 
     }, 
     "node":{ 
      "class":"file", 
      "title":"Item 1.2.b" 
     }, 
     "node":{ 
      "class":"file", 
      "title":"Item 1.2.c" 
     } 
     }, 
     "node":{ 
     "class":"folder", 
     "title":"Item 1.3", 
     "node":{ 
      "class":"folder", 
      "title":"Item 1.3.a", 
      "node":{ 
      "class":"file", 
      "title":"Item 1.3.a.i" 
      }, 
      "node":{ 
      "class":"file", 
      "title":"Item 1.3.a.ii" 
      } 
     } 
     } 
    }, 
    "node":{ 
     "class":"folder", 
     "title":"Item 2", 
     "node":{ 
     "class":"file", 
     "title":"item 2.a" 
     }, 
     "node":{ 
     "class":"file", 
     "title":"Item 2.b" 
     } 
    } 
    } 
}

किसी एक में है कि बहुत कुछ चालू करने के लिए एक त्वरित तरीका के लिए किसी भी संकेत दिए गए है सभी नेस्टेड तत्वों के साथ उल? यह भी अच्छा होगा अगर JSON में "क्लास" तत्व प्रत्येक LI के लिए कक्षा के रूप में उपयोग किया जा सकता है।

किसी भी मदद की बहुत सराहना की जाती है।

धन्यवाद,

डेव।

स्रोत

2009-07-31 Dave Waller

FWIW: मुझे लगता है कि आपके JSON में कुछ गड़बड़ है। ऐसे कुछ स्थान हैं जहां आपके पास एक ही ऑब्जेक्ट में एकाधिक "नोड" कुंजी हैं। –

आपका जेसन आपके कार्य के लिए अनुपयुक्त है। कुछ वस्तुओं में एक ही नाम ("नोड") के साथ कई गुण होते हैं, इसलिए वे एक-दूसरे को ओवरराइड कर रहे हैं। आपको इसके बजाय नोड्स के सरणी का उपयोग करना होगा।

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function parseNodes(nodes) { // takes a nodes array and turns it into a <ol> 
    var ol = document.createElement("OL"); 
    for(var i=0; i<nodes.length; i++) { 
     ol.appendChild(parseNode(nodes[i])); 
    } 
    return ol; 
} 

function parseNode(node) { // takes a node object and turns it into a <li> 
    var li = document.createElement("LI"); 
    li.innerHTML = node.title; 
    li.className = node.class; 
    if(node.nodes) li.appendChild(parseNodes(node.nodes)); 
    return li; 
} 

window.jsonData = [{ 
    "class": "folder", 
    "title": "Test Framework", 
    "nodes": [{ 
     "class": "folder", 
     "title": "Item 1", 
     "nodes": [{ 
      "class": "folder", 
      "title": "Item 1.1", 
      "nodes": [{ 
       "class": "file", 
       "title": "Item 1.1.a" 
      }] 
     }, 
     { 
      "class": "folder", 
      "title": "Item 1.2", 
      "nodes": [{ 
       "class": "file", 
       "title": "Item 1.2.a" 
      }, 
      { 
       "class": "file", 
       "title": "Item 1.2.b" 
      }, 
      { 
       "class": "file", 
       "title": "Item 1.2.c" 
      }] 
     }, 
     { 
      "class": "folder", 
      "title": "Item 1.3", 
      "nodes": [{ 
       "class": "folder", 
       "title": "Item 1.3.a", 
       "nodes": [{ 
        "class": "file", 
        "title": "Item 1.3.a.i" 
       }, 
       { 
        "class": "file", 
        "title": "Item 1.3.a.ii" 
       }] 
      }] 
     }] 
    }, 
    { 
     "class": "folder", 
     "title": "Item 2", 
     "nodes": [{ 
      "class": "file", 
      "title": "item 2.a" 
     }, 
     { 
      "class": "file", 
      "title": "Item 2.b" 
     }] 
    }] 
}]; 

</script> 
</head> 
<body> 
    <input type="button" 
    onclick="document.body.appendChild(parseNodes(jsonData))" 
    value="go" /> 
</body> 
</html>

और मैं आइटम numberings नोड खिताब :)

<style type="text/css"> 
ol { list-style-type: none } 
ol ol { list-style-type: decimal } 
ol ol ol { list-style-type: decimal } 
ol ol ol ol { list-style-type: lower-alpha } 
ol ol ol ol ol { list-style-type: lower-roman } 
</style>

See it in action. का मिलान करने के लिए इस सीएसएस जोड़ सकते हैं: यहाँ कार्यरत डेटा संरचना और कार्यों कि यह एक नेस्टेड सूची में बदल सकते हैं है

स्रोत

2009-07-31 10:38:00 Alsciende

आप अपने जेसन संरचना के माध्यम से अपने आप से चल सकते हैं और आवश्यकता होने पर उपयुक्त <li> बना सकते हैं, लेकिन मैं आपको समग्र पैटर्न को लागू करने का सुझाव देता हूं। अधिक जानकारी के लिए link देखें

स्रोत

2009-07-31 10:27:42

यहां कुछ साधारण कोड है जो प्रत्येक ऑब्जेक्ट के लिए <ul> तत्व बनाता है, और प्रत्येक भाग के लिए <li> तत्व बनाता है। यदि आप एक विशेष मामला जोड़ना चाहते हैं तो "class" जैसी चीजों के खिलाफ child वैरिएबल का परीक्षण करने के लिए आप एक त्वरित जांच जोड़ सकते हैं।

function jsonToHtmlList(json) { 
    return objToHtmlList(JSON.parse(json)); 
} 

function objToHtmlList(obj) { 
    if (obj instanceof Array) { 
     var ol = document.createElement('ol'); 
     for (var child in obj) { 
      var li = document.createElement('li'); 
      li.appendChild(objToHtmlList(obj[child])); 
      ol.appendChild(li); 
     } 
     return ol; 
    } 
    else if (obj instanceof Object && !(obj instanceof String)) { 
     var ul = document.createElement('ul'); 
     for (var child in obj) { 
      var li = document.createElement('li'); 
      li.appendChild(document.createTextNode(child + ": ")); 
      li.appendChild(objToHtmlList(obj[child])); 
      ul.appendChild(li); 
     } 
     return ul; 
    } 
    else { 
     return document.createTextNode(obj); 
    } 
}

यह वही नहीं करेगा जो आप चाहते हैं, क्योंकि आपका JSON समझ में नहीं आता है। जावास्क्रिप्ट में ऑब्जेक्ट्स, और इसलिए JSON, नक्शे हैं, और इसलिए आपके पास एक ही नाम वाले एक से अधिक बच्चे नहीं हो सकते हैं। सेड्रिक बताते हुए आपको अपने एकाधिक "नोड" को सरणी में बदलना होगा।

स्रोत

2009-07-31 10:43:34

नेस्टेड JSON को जावास्क्रिप्ट

उत्तर

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