कुंजी

Question

द्वारा समूहीकृत सूची सरणी सामग्री यदि मेरी शब्दावली गलत है तो मैं क्षमा चाहता हूं - यह निश्चित रूप से विशेषज्ञता का मेरा क्षेत्र नहीं है।

मैं एक json फ़ाइल से <select> सूची बनाने के लिए देख रहा हूं, और एक कुंजी द्वारा <optgroup> एस में प्रविष्टियों को समूहित करना चाहता हूं। मैं सफलतापूर्वक सभी प्रविष्टियों को एक चयन में सूचीबद्ध करने में सक्षम हूं, लेकिन यह नहीं जानता कि कैसे अपनी कुंजी के नीचे वस्तुओं को घूमना और घोंसला करना है।

मेरे JSON इस तरह दिखता है:

[ 
    { 
     "Type" : "Overdrive", 
     "Brand" : "Chase Bliss", 
     "Name" : "Brothers", 
     "Width" : 2.75, 
     "Height" : 4.77, 
     "Image" : "public/images/pedals/chasebliss-brothers.png" 
    } 
] 

यहाँ मैं कैसे प्रतिपादन कर रहा हूँ <select>:

<select> 
    <optgroup label="Chase Bliss"> 
     <option data-width="..." data-height="..." data-image="...">Chase Bliss Brothers</option> 
    </optgroup> 
</select> 

सकता है:

window.RenderPedals = function(pedals){ 
    for(var i in pedals) { 
     var $pedal = $("<option>"+ pedals[i].Brand + " " + pedals[i].Name +"</option>").attr('id', pedals[i].Name.toLowerCase().replace(/\s+/g, "-").replace(/'/g, '')); 
     $pedal.data('width', pedals[i].Width); 
     $pedal.data('height', pedals[i].Height); 
     $pedal.data('height', pedals[i].Height); 
     $pedal.data('image', pedals[i].Image); 
     $pedal.appendTo('.pedal-list'); 
    } 
} 

क्या मैं देख रहा हूँ इस मार्कअप है कोई मुझे सही दिशा में इंगित करता है?

Answer 1

आप वस्तु destructuring का उपयोग कर मौजूदा ऑब्जेक्ट के गुणों को प्राप्त कर सकते हैं for..in पाश के बिना, "Brand" करने के लिए सेट label विशेषता के साथ एक <optgroup> तत्व बनाते हैं, <optgroup> को <option> संलग्न, <select> को <optgroup> जोड़ देते हैं। देखें कि क्या एक <optgroup> तत्व label विशेषता Brand करने के लिए सेट होने से मौजूद है, अगर true, कि <optgroup> को <option> संलग्न किसी और नई <option> तत्व को html सेट के साथ <select> के लिए एक नया <optgroup> तत्व जोड़ देते हैं।

var data = [{ 
 
    "Type": "Overdrive", 
 
    "Brand": "Chase Bliss", 
 
    "Name": "Brothers", 
 
    "Width": 2.75, 
 
    "Height": 4.77, 
 
    "Image": "public/images/pedals/chasebliss-brothers.png" 
 
} 
 
, { 
 
    "Type": "Underdrive", 
 
    "Brand": "Bliss Chase", 
 
    "Name": "Sisters", 
 
    "Width": 5.72, 
 
    "Height": 7.74, 
 
    "Image": "public/images/pedals/chasebliss-sisters.png" 
 
} 
 
, { 
 
    "Type": "Throughdrive", 
 
    "Brand": "Bliss Chase", 
 
    "Name": "Cousins", 
 
    "Width": 2.75, 
 
    "Height": 4.74, 
 
    "Image": "public/images/pedals/chasebliss-cousins.png" 
 
} 
 
]; 
 

 
window.RenderPedals = function(pedals) { 
 
    var {Type, Brand, Name, Width, Height, Image} = pedals; 
 
    var option = $("<option>", { 
 
       text: `${Brand} ${Name}`, 
 
       id: Name.toLowerCase() 
 
        .replace(/(\s+)|(['"])/g, (m, p1, p2) => p1 ? "-" : ""), 
 
       data: { 
 
        width: Width, 
 
        height: Height, 
 
        image: Image 
 
       } 
 
       }); 
 
    if ($("optgroup").is(`[label="${Brand}"]`)) { 
 
    $(`optgroup[label="${Brand}"]`).append(option); 
 
    } else { 
 
    $("<optgroup>", { 
 
     label: Brand, 
 
     html: option 
 
    }).appendTo(".pedal-list"); 
 
    } 
 
} 
 

 
data.forEach(RenderPedals);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<select class="pedal-list"></select>

Answer 2

आप एक डेटा संरचना है कि HTML का मिलान नहीं हुआ था, तो यह बहुत के बारे में तर्क करने की आसान होगा।

दिया

[ 
    { 
     "Type" : "Overdrive", 
     "Brand" : "Chase Bliss", 
     "Name" : "Brothers", 
     "Width" : 2.75, 
     "Height" : 4.77, 
     "Image" : "public/images/pedals/chasebliss-brothers.png" 
    } 
] 

जब तुम संरचना

<select> 
    <optgroup label="Chase Bliss"> 
     <option data-width="..." data-height="..." data-image="...">Chase Bliss Brothers</option> 
    </optgroup> 
</select> 

इसके बजाय HTML में JSON से इस बदलाव बनाने के लिए, एक नया डेटा संरचना है कि HTML मेल खाता बनाने की कोशिश कर के

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

कुछ निम्नलिखित में अच्छी तरह से काम करेगा की तरह ..

[ 
    { 
    brandName: "Chase Bliss", 
    items: [ { name: "Brothers" /* width, height, etc */ } ] 
    } 
] 

आप एक समारोह को कम लिख सकता है इस बदलाव बनाने के लिए:

let optionGroups = pedals.reduce((optionGroups, pedal) => { 
    let optionGroup = optionGroups.find(group => pedal.Brand === group.brandName) || {} 

    if (!optionGroup.brandName) { 
    optionGroup.brandName = pedal.Brand 
    optionGroup.items = [] 
    optionGroups.push(optionGroup) 
    } 

    optionGroup.items.push(pedal) 
    return optionGroups 
}, []) 

समारोह प्रस्तुत करना तो बस बाहरी समूहों पर मैप कर सकते, और फिर आंतरिक वस्तुओं।

window.renderPedals = (optionGroups) => { 
    optionGroups.map((group) => { 
    let $optgroup = $("<optgroup>", { 
     label: group.brandName 
    }); 

    group.items.map((pedal) => { 
     let {Type, Brand, Name, Width, Height, Image} = pedal; 
     let $pedal = $("<option>", { 
     text: `${Brand} ${Name}`, 
     id: `${Name.toLowerCase().replace(/\s+/g, "-").replace(/'/g, '')}`, 
     data: { 
      width: Width, 
      height: Height, 
      image: Image 
     }, 
     appendTo: $optgroup 
     }); 
    }) 
    $optgroup.appendTo(".pedal-list"); 
    }) 
} 

https://jsfiddle.net/f4x9vk0f/2/