Étiquette : array

[Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)

30/06/2022 / admin

Source: How to sum all of values from specific key in object?

J’ai cet objet:

var arr = [{ 'credit': 1, 'trash': null }, { 'credit': 2, 'trash': null}]

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

arr.reduce((total, obj) => obj.credit + total,0)
// 3

1 2	arr.reduce((total, obj) => obj.credit + total,0) // 3

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

23/06/2022 / admin

Source: Accessing nested JavaScript objects and arrays by string path et la demo sur jsFiddle.net.

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

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'

}

]

};

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;

}

Utilisation:

Object.byString(someObj, 'part3[0].name');
// Part 3A

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

Code source (zip)

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

});

}

Articles récents

Catégories

Archives

Méta

Étiquette : array

[Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)

[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