Le bloc-notes professionnel d'un développeur front-end senior
Source: How to sum all of values from specific key in object?
J’ai cet objet:
|
1 |
var arr = [{ 'credit': 1, 'trash': null }, { 'credit': 2, 'trash': null}] |
…et je veux effectuer la somme de toutes les valeurs de la clé credit (ce qui me retournerait « 3 » dans le cas de mon tableau).
|
1 2 |
arr.reduce((total, obj) => obj.credit + total,0) // 3 |
Source: Accessing nested JavaScript objects and arrays by string path et la demo sur jsFiddle.net.
|
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 |
var someObject = { 'part1' : { 'name': 'Part 1', 'size': '20', 'qty' : '50' }, 'part2' : { 'name': 'Part 2', 'size': '15', 'qty' : '60' }, 'part3' : [ { 'name': 'Part 3A', 'size': '10', 'qty' : '20' }, { 'name': 'Part 3B', 'size': '5', 'qty' : '20' }, { 'name': 'Part 3C', 'size': '7.5', 'qty' : '20' } ] }; |
|
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; } |
Utilisation:
|
1 2 |
Object.byString(someObj, 'part3[0].name'); // Part 3A |
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
Sources:
foreachExtrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js
|
1 2 3 4 5 6 |
/** * @return {string} */ formatStreet: function (str) { return String(str).replace(/,(?=[^\s])/g, ", "); }, |
Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html
|
1 |
<text args="formatStreet(address().street)"></text> |
Résultat en front:
Street 1,Street 2,Street 3
|
1 2 3 4 |
<each args="data: address().street, as: 'streetLine'"> <text args="streetLine"></text> <br> </each> |
Résultat en front:
Street 1
Street 2
Street 3
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']) |
Vous allez trouver des valeurs pour l’attribut colspan dans certains Layouts. Exemple ici: /Magento/Sales/view/frontend/layout/sales_order_view.xml#L32 pour les tableaux ayant la classe .sales-order-view.
|
1 |
<argument name="label_properties" xsi:type="string">colspan="4" class="mark"</argument> |
|
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); |
|
1 2 3 4 5 6 7 8 9 |
// Is there a way to count the number of keys in a json object directly in angular expressions? // https://stackoverflow.com/questions/33520317/is-there-a-way-to-count-the-number-of-keys-in-a-json-object-directly-in-angular app.filter('numKeys', function() { return function(json) { var keys = Object.keys(json) return keys.length; } }); |
Pour l’objet JSON lineData.details.config, numKeys me donne le nombre d’items présents dans l’objet.
|
1 2 3 4 5 6 |
<td> <span style="color: red; font-weight: bold;">{{lineData.details.config | numKeys}}</span> </td> <td ng-repeat="(id, config) in lineData.details.config" class="td-nobor" ng-init="resultCode=config.resultCode;stockMessage=config.stockMessage"> [...] </td> |
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:
