जावास्क्रिप्ट: सरणी से अनियंत्रित सूची कैसे बनाएं?

Question

मेरे पास निम्न सरणी है और मैं इससे एक अनियंत्रित सूची बनाना चाहता हूं, लेकिन मुझे उचित प्रारूप में अनियंत्रित सूची उत्पन्न करने में परेशानी हो रही है। मैंने इसी तरह के प्रश्न खोजे हैं लेकिन मौजूदा समाधानों में से कोई भी मेरी समस्या के लिए काम नहीं करता है।

var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 

यहाँ मेरी जावास्क्रिप्ट कोड है:

function arrToUl(arr) { 
    var div = document.getElementById('myList'); 
    var ul = document.createElement('ul'); 

    for (var i = 0; i < arr.length; i++) { 

    if (arr[i] instanceof Array) { 
     var list = arrToUl(arr[i]); 
    } else { 
     var li = document.createElement('li'); 
     li.appendChild(document.createTextNode(arr[i])); 
     console.log(ul.appendChild(li)); 
    } 
    div.appendChild(ul); 
    } 
} 

arrToUl(myArray); 

ऊपर कोड निम्न परिणाम उत्पादन किया जाता है:

<ul> 
<li>Value 1</li> 
<li>Inner Value 1</li> 
<li>Inner Value 2</li> 
<li>Inner Value 3</li> 
<li>Inner Value 4</li> 
<li>Value 2</li> 
<li>Value 3</li> 
<li>Value 4</li > 
<li>Value 5</li > 
<li>Value 6</li> 

लेकिन परिणाम के नीचे की तरह दिखना चाहिए:

<ul> 
<li>Value 1 
    <ul> 
     <li>Inner Value 1</li> 
     <li>Inner Value 2</li> 
     <li>Inner Value 3</li> 
     <li>Inner Value 4</li> 
    </ul> 
</li> 
<li>Value 2</li> 
<li>Value 3</li> 
<li>Value 4</li> 
<li>Value 5</li> 
<li>Value 6</li> 

आपकी मदद के लिए धन्यवाद।

Answer 1

आपने सभी <ul> तत्वों को myList <div> में जोड़ दिया है। इसे बदलने के लिए, मैंने arrToUl(root, arr) फ़ंक्शन में एक नया पैरामीटर जोड़ा है।

नए पैरामीटर, root, निर्धारित करता है जो बनाया <ul> को जोड़ा जाना चाहिए ताकि समारोह एक उप सरणी का सामना करना पड़ता है, यह सब-सूची के निर्माण के लिए रूट के रूप में पिछले सूची आइटम का उपयोग करता है।

var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 
 

 
function arrToUl(root, arr) { 
 
    var ul = document.createElement('ul'); 
 
    var li; 
 
    
 
    root.appendChild(ul); // append the created ul to the root 
 

 
    arr.forEach(function(item) { 
 
    if (Array.isArray(item)) { // if it's an array 
 
     arrToUl(li, item); // call arrToUl with the li as the root 
 
     return; 
 
    } 
 
    
 
    li = document.createElement('li'); // create a new list item 
 
    li.appendChild(document.createTextNode(item)); // append the text to the li 
 
    ul.appendChild(li); // append the list item to the ul 
 
    }); 
 
} 
 

 
var div = document.getElementById('myList'); 
 

 
arrToUl(div, myArray);

<div id="myList"></div>

Answer 2

आप पिछले li बचाने के लिए और एक लक्ष्य डोम तत्व के साथ एक विस्तारित समारोह के साथ यह करने के लिए संलग्न कर सकते हैं।

function iter(target) { 
 
    var ul = document.createElement('ul'), 
 
     li; 
 

 
    target.appendChild(ul); 
 
    return function (a) { 
 
     if (Array.isArray(a)) { 
 
      if (!li) { 
 
       li = document.createElement('li'); 
 
       ul.appendChild(li); 
 
      } 
 
      a.forEach(iter(li)); 
 
      return; 
 
     } 
 
     li = document.createElement('li'); 
 
     li.appendChild(document.createTextNode(a)); 
 
     ul.appendChild(li); 
 
    }; 
 
} 
 

 
var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 
 

 
myArray.forEach(iter(document.getElementById('myList')));

<div id="myList"></div>

Answer 3

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

GUID Generator एक अद्वितीय आईडी बनाने का एक अच्छा तरीका है।

Answer 4

मैं रिकर्सन के आधार पर एक समाधान का प्रस्ताव दूंगा, ऐसा लगता है कि मुझे स्पष्ट और कम त्रुटि-प्रवण लगता है। यह थोड़ा अलग परिणाम उत्पन्न करता है क्योंकि यह प्रत्येक सरणी तत्व को एक ही स्तर पर नोड पर मैप करता है और मुझे लगता है कि यह एक सरणी से उल बनाने का आउटपुट होना चाहिए।

var myArray = [ 
    'Value 1', 
    ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 
    'Value 2', 
    'Value 3', 
    'Value 4', 
    'Value 5', 
    'Value 6' 
]; 

function appendItems(arr, el) { 
    if(!arr.length) return el; 
    else { 
     var head = arr.shift(); 
     var child = transform(head); 
     var li = document.createElement('li'); 
     li.appendChild(child); 
     el.appendChild(li); 
     return appendItems(arr, el); 
    } 
} 

function transform(item) { 
    if(Array.isArray(item)) { 
    var ul = document.createElement('ul'); 
    return appendItems(item, ul); 
    } else { 
    return document.createTextNode(item); 
    } 
} 

var ul = transform(myArray); 

आप उत्पादन आप का उल्लेख करना चाहते हैं, तो यह बेहतर हो क्रम नोड प्रति एक यात्रा से मिलान करने में इनपुट स्वरूप बदलने के लिए कर सकते हैं। पूर्व:

var arr = [ 
    {label: 'value1', subitems: ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4']} 
]; 

Answer 5

आपका समारोह arrToUl कहा जाता है, तो यह सिर्फ इतना है कि क्या करना चाहिए: एक ul को सरणी कनवर्ट करें।

एक बार आपके पास ul हो, तो आप इसे कहीं भी सम्मिलित कर सकते हैं, लेकिन फ़ंक्शन के बाहर ले जाएं।

फिर यह सब स्पष्ट हो जाता है।

function arrToUl(arr) { 
 
    var ul = document.createElement('ul'), li; 
 
    for (var i = 0; i < arr.length; i++) { 
 
    if (Array.isArray(arr[i])) { 
 
     li.appendChild(arrToUl(arr[i])); 
 
    } else { 
 
     li = document.createElement('li'); 
 
     li.appendChild(document.createTextNode(arr[i])); 
 
     ul.appendChild(li); 
 
    } 
 
    } 
 
    return ul; 
 
} 
 
var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 
 
document.body.appendChild(arrToUl(myArray));