$.extend remplace au lieu de merger lorsque {} à plusieurs niveaux

lolotoobo
Javascript

Bonjour,

Je passe mes variables de fonctions par des tableaux et j'utilise jQuery.extend() pour merger les données passées et les valeurs par défaut que je souhaite donner.

Le soucis arrive lorsque j'ai des tableaux à plusieurs niveaux. Si je touche à une variable dans un tableau de 2e niveau, il remplace le tableau par celui passé en paramètre. Si je ne touche pas à des sous-tableaux alors ceux-ci sont bien conservés.

Un long discours vaut mieux qu'un petit dessin :) mais un exemple vous aidera à situer mon soucis :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="docs-assets/ico/favicon.png">
    <title>popol</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>

        function Init(options) {
            var settings = $.extend({
                v1: 'default',
                v2: 'default',
                v3: true,
                v4: {
                    v4ss1: false,
                    v4ss2: 'lolo',
                    v4ss3: true
                },
                v5: {
                    v5ss1: true,
                    v5ss2: true
                }
            }, options);
            console.log(settings);
        }

        jQuery(document).ready(function($) {
            Init({
                v1: 'element 1',
                v4: {
                    v4ss1: true
                }
            });
        });

    </script>
</body>
</html>

Si vous regardez dans la console, vous verrez que v1, v2, v3 sont bien là. v5, v5ss1, v5ss2 aussi. Le soucis vient de v4, où j'ai modifié v4ss1 et il n'y a que lui dans le tableau... v4ss2 et v4ss3 ont disparus. En gros il a remplacé le tableau v4 par celui passé en paramètre au lieu de merger.

Merci de votre aide

2 réponses

ClementParis
Réponse acceptée

Salut,

Il faut que tu passes true en premier paramètre de $.extend() pour merger récursivement toutes les valeurs (deep extend), comme ceci :

var settings = $.extend(true, {
                v1: 'default',
               // ...
            }, options);

Source : API jQuery.extend

lolotoobo
Auteur

Ohh tainn quelle honte.... oui mais sur la doc je me suis arrêté à la version 1.0, j'ai pas vu la version 1.1.4. Je retourne apprendre à lire une doc.

Et merci beaucoup :)