Source: How to create a dynamic nested object from array of properties.
PDF – How to create a dynamic nested object from array of properties · GitHub
Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Object.byString = function(o, s) { s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties s = s.replace(/^\./, ''); // strip a leading dot var a = s.split('.'); for (var i = 0, n = a.length; i < n; ++i) { var k = a[i]; if (k in o) { o = o[k]; } else { return; } } return o; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const priceTable = { "<=4": { "size": [ { "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, { "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, { "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, { "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, { "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60 { "100": "5.88", "250": "4.88", "500": "4.88", "1000": "3.88", "2000": "3.88" } ] } } const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères const targetValue = Object.byString( priceTable, combinedPath ); // interprété comme une chaîne de caractères (<=4.size[4]['2000']) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// https://stackoverflow.com/questions/24943200/javascript-2d-array-indexof // https://stackoverflow.com/a/24943461 // Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel function wasLetterAlreadyPushedInArray(array, value) { for (var i = 0; i < array.length; i++) { // This if statement depends on the format of your array for (var j = 0; j < array[i].length; j++) { if (array[i][j] === value) { return true; // Found it } } } return false; // Not found } |
1 2 3 |
if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) { inGameLetterCount = inGameLetterCount -1; } |
Source: Removing elements from an array of objects based on duplicate values of multiple keys
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var arr = [ { type_id: "3", full_empty:"true", quantity:1}, { type_id: "3", full_empty:"true", quantity:1}, { type_id: "9", full_empty:"true", quantity:4}, { type_id: "9", full_empty:"false", quantity:4}, { type_id: "9", full_empty:"true", quantity:4}, { type_id: "9", full_empty:"true", quantity:4}, { type_id: "9", full_empty:"true", quantity:4} ]; var a = arr.reduce(function (accumulator, current) { if (checkIfAlreadyExist(current)) { return accumulator } else { return accumulator.concat([current]); } function checkIfAlreadyExist(currentVal) { return accumulator.some(function(item){ return (item.type_id === currentVal.type_id && item.full_empty === currentVal.full_empty); }); } }, []); console.log(a); |
Source: How to loop through array in jQuery?
1 2 3 4 |
var i; for (i = 0; i < substr.length; ++i) { // do something with `substr[i]` } |
1 2 3 |
jQuery.each(substr, function(index, item) { // do something with `item` (or `this` is also `item` if you like) }); |
1 2 3 |
substr.forEach(function(item) { // do something with `item` }); |
Inspiration pour ce code:
Je pars d’un menu dont la structure HTML est la suivante (une liste imbriquée simple) : https://jsfiddle.net/xpvt214o/513005/.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="level0"> <li>level0 <ul class="level1"> <li>level1 <ul class="level2"> <li>level2</li> <li>level2</li> <li>level2</li> [...] </ul> </li> </li> </ul> |
Sous iPhone, le menu a visiblement trop d’entrées. En tout cas lorsqu’on l’affiche, le navigateur Safari crashe et recharge la page. J’ai remarqué au cours de mes tests qu’en supprimant le dernier sous-niveau d’arborescence (.level2
dans mon exemple), le navigateur ne crashait plus. J’ai donc mis en place un système de cache du dernier sous-niveau d’arborescence de mon menu.
Ce système consiste à mettre en cache dans un tableau javaScript array et à l’aide des méthodes .push()
et .detach()
(jQuery) tous les derniers sous-niveaux d’arborescence. Ils ne sont, de cette manière, plus présents dans le DOM lorsqu’on ouvre le menu qui se trouve ainsi beaucoup plus léger à manipuler.
A l’activation d’un sous-menu mis en cache, on le fait ré-apparaître dans le DOM en le sortant du tableau. On fait le lien entre la rubrique activée et la sous-rubrique correspondante via un système d’IDs:
1 2 3 4 5 6 7 8 9 10 11 12 |
// Mise en cache du niveau 2 (crash iOS) var $cdDropdown = $('#cdDropdown'); $cdDropdown.find('.level2').each(function(){ cachedMenuEntries.push($(this).detach()); }); $cdDropdown.on('DOMSubtreeModified', function(e) { if (e.target.innerHTML.length > 0) { $('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu); } }); // end: Mise en cache du niveau 2 (crash iOS) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function goBack(e) { var eClosestUl = e.closest('ul'); if(eClosestUl.hasClass('level2')){ eClosestUl.parent('.has-children').parent('ul').removeClass('move-out'); eClosestUl.remove(); } else{ eClosestUl.addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out'); } } function cachedMenu(e) { var element = $(e.currentTarget); if(!element.closest('li').hasClass('go-back') && element.closest('ul').hasClass('level1')) { var getEntryID = element.closest('li').attr('id'); matchValue = getEntryID.split('li-')[1]; $(cachedMenuEntries[searchStringInArray(matchValue, cachedMenuEntries)]) .removeClass('is-hidden') .insertAfter(element); } if(element.closest('li').hasClass('go-back')) { goBack(element); } } function searchStringInArray (str, strArray) { for (var j=0; j<strArray.length; j++) { if (strArray[j].context.id == 'ul-'+str) return j; } return -1; } |
On invoque la fonction searchStringInArray
pour rechercher dans l’intégralité des entrées du tableau cachedMenuEntries
l’information [*].context.id
qui va matcher avec l’ID de la rubrique que nous venons d’activer:
Sources: JavaScript filter that stops at the first result et Array.prototype.find().
1 2 3 4 5 6 7 8 |
var array1 = [5, 12, 8, 130, 44]; var found = array1.find(function(element) { return element > 10; }); console.log(found); // expected output: 12 |
Source: How to Search Arrays in JavaScript: Searching Arrays Using for Loops.
1 2 3 4 5 6 7 8 9 10 |
function findInArray(ar, val) { for (var i = 0,len = ar.length; i < len; i++) { if ( ar[i] > val ) { // first val > leftStackOuterHeight return i; } } return -1; } var firstMatchingElement = findInArray(output, leftStackOuterHeight); |
Source: Creating an array of cumulative sum in javascript et demo.
1 2 3 4 5 6 7 8 9 10 |
var myarray = [5, 10, 3, 2]; var output = []; var sum = 0; for (var i in myarray) { sum = sum + myarray[i]; output.push(sum); } console.log(output); |
Sources: How to create an array from .each loop with jQuery et How to generate UL Li list from string array using jquery?.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function addHeaderTopRowLinksToMegadropdownXS() { var headerHorizontalNav01 = []; $cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown'); $('.yCmsComponent', '#page-header').each(function(){ headerHorizontalNav01.push($(this).html()); }); $.each(headerHorizontalNav01, function(i) { $('<li class="has-children">'+headerHorizontalNav01[i]+'</li>') .appendTo($cdDropdownContent); }); } |
Attention: le plugin for.less
utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.
Source: Loop over an array of name value pairs in LESS et mixin sous Git.
CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).
Mixin LESS (ne pas oublier d’inclure le mixin for.less) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.Couleur { .facet-mark { &:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } } @facetColors: Beige #DEB887, Blanc #ffffff, Bleu #00b0f0, Gris #777777, Jaune #ffe209, Marron #974706, Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%), Noir #000000, Orange #fb6e05, Rose #ff338a, Rouge #ff0000, Vert #00b050, Violet #800080; .for(@facetColors); .-each(@value) { @name: extract(@value, 1); .@{name} { .facet-mark { &:before { background: extract(@value, 2); } } } } } |
Rendu CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.Couleur .facet-mark:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } .Couleur .Beige .facet-mark:before { background: #000; } .Couleur .Blanc .facet-mark:before { background: #fff; } .Couleur .Bleu .facet-mark:before { background: #00b0f0; } .Couleur .Gris .facet-mark:before { background: #777; } .Couleur .Jaune .facet-mark:before { background: #ffe209; } .Couleur .Marron .facet-mark:before { background: #974706; } .Couleur .Multicolore .facet-mark:before { background: #000; } .Couleur .Noir .facet-mark:before { background: #000; } .Couleur .Orange .facet-mark:before { background: #fb6e05; } .Couleur .Rose .facet-mark:before { background: #ff338a; } .Couleur .Rouge .facet-mark:before { background: red; } .Couleur .Vert .facet-mark:before { background: #00b050; } .Couleur .Violet .facet-mark:before { background: #000; } |