object – devfrontend.info

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

[CSS] Iframe, object & embed responsive

12/02/2015 / admin

Ressources en ligne

Responsive Iframes — The Right Way (CSS Only)! par Ben Marshall. Version PDF.

Solution 1 :

La plus récente, mais pas testée!

Responsive Iframes — The Right Way (CSS Only)! par Ben Marshall. Version PDF.

Solution 2 :

Mise en place dans un projet OK. Source : Fluid Width Video.

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

</div>

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoWrapper {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.videoWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Solution 3 :

Attention : privilégier la solution #1. La solution #2 fonctionne en demo sur le site de l’auteur, mais j’ai rencontré quelques soucis lorsque j’ai souhaité la mettre en pratique.
Source : Iframe, object & embed responsive.

<div class="video"
    <div class="embed-container"
        <iframe src="http://www.youtube.com/embed/id-youtube" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<div class="video"

<div class="embed-container"

</div>

.video{
    max-width: /*Largeur de la video*/px;
}
.embed-container{
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16/9 ratio */
    position: relative;
}
.embed-container iframe,
.embed-container object,
.embed-container embed{
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.video{

max-width: /*Largeur de la video*/px;

}

.embed-container{

height: 0;

overflow: hidden;

padding-bottom: 56.25%; /* 16/9 ratio */

position: relative;

}

.embed-container iframe,

.embed-container object,

.embed-container embed{

height: 100%;

left: 0;

top: 0;

width: 100%;

}

<meta name="viewport" content="initial-scale=1.0" />

1	<meta name="viewport" content="initial-scale=1.0" />

Solution 4 avec Bootstrap 3

Jamais testé… Bootstrap 3 Tips and Tricks You Still Might Not Know – Responsive Video Embeds that Maintain Aspect Ratio.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

</div>

</div>

Articles récents

Catégories

Archives

Méta

Étiquette : object

[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

[CSS] Iframe, object & embed responsive

Ressources en ligne

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 avec Bootstrap 3