array – devfrontend.info

[Javascript] Créer des chemins dynamiques vers des données contenues dans un objet ou un tableau

23/06/2022 / admin

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

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

11/01/2022 / admin

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

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;
}

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;

}

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'])

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" }, // <=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'])

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

21/08/2020 / admin

    // 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
    }

// 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

}

if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) {
    inGameLetterCount = inGameLetterCount -1;
}

if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) {

inGameLetterCount = inGameLetterCount -1;

}

[Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur

26/04/2019 / admin

Source: Removing elements from an array of objects based on duplicate values of multiple keys

    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);

var arr = [

{ 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}

];

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);

[javaScript] boucler dans un tableau

06/08/2018 / admin

Source: How to loop through array in jQuery?

javaScript

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

var i;

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

// do something with `substr[i]`

}

jQuery

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

jQuery.each(substr, function(index, item) {

// do something with `item` (or `this` is also `item` if you like)

});

ES5

substr.forEach(function(item) {
    // do something with `item`
});

substr.forEach(function(item) {

// do something with `item`

});

[javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)

02/08/2018 / admin

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/.

<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>

<li>level0

<li>level1

<li>level2</li>

[...]

</ul>

</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:

// 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)

// 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)

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;
}

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:

Axes d’amélioration

Utiliser un tableau clé/valeur (key/value)

D’autres pistes si vous avez des crashes iOS

Les crashes peuvent provenir de transitions CSS mal paramétrées; CSS GPU Animation: Doing It Right.

[Javascript] Filtrer les éléments d’un tableau et stopper à la première occurrence qui matche

05/07/2018 / admin

ECMAScript:

Sources: JavaScript filter that stops at the first result et Array.prototype.find().

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {

return element > 10;

});

console.log(found);

// expected output: 12

Javascript:

Source: How to Search Arrays in JavaScript: Searching Arrays Using for Loops.

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);

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);

[Javascript] Créer un tableau de sommes cumulées avec For

05/07/2018 / admin

Source: Creating an array of cumulative sum in javascript et demo.

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);

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);

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

22/06/2018 / admin

Sources: How to create an array from .each loop with jQuery et How to generate UL Li list from string array using jquery?.

      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);
        });
      }

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);

});

}

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

12/06/2018 / admin

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) :

.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);
          }
        }
      }
  }
}

.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 :

.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;
}

.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;

}

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Étiquette : array

[Javascript] Créer des chemins dynamiques vers des données contenues dans un objet ou un tableau

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

[Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur

[javaScript] boucler dans un tableau

javaScript

jQuery

ES5

[javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)

Axes d’amélioration

D’autres pistes si vous avez des crashes iOS

[Javascript] Filtrer les éléments d’un tableau et stopper à la première occurrence qui matche

ECMAScript:

Javascript:

[Javascript] Créer un tableau de sommes cumulées avec For

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

javaScript

jQuery

ES5

Axes d’amélioration

D’autres pistes si vous avez des crashes iOS

ECMAScript:

Javascript: