1

tengo una variable que es un object con 2 nodos:

var jDef = {id: 'hola', valores: [{cod: 1, desc: 'dddd'}, {cod: 2, desc: 'bbbb'}]}

en otro punto del programa, hago:

var jTemp.valores[1] = $.extend(jDef.valores[1], {selected: true});

Esto funciona como espero.

Si en su lugar lo tengo así (función que recoge la lista de una BBDD):

var jDef = {id: 'hola', valores: obtenerListaBBDD()};
var jTemp = $.extend({ },  jDef);
jTemp.valores[1] = $.extend(jDef.valores[1], {selected: true});

El nodo nuevo 'selected' aparece en ambas variables (jDef y jTemp), cuando yo quiero que sólo se incluya en jTemp.

Alguien me puede aclarar los conceptos o dar una solución?

He montado un jsFiddle https://jsfiddle.net/u44eg64y/17/

Saludos,

SeakOink (he editado pregunta, ya que no era exacta)

EDIT:

Este es el código real. jCRUD.Datatable[n].valors_admesos[1] tiene el mismo valor que jTemp.valors_admesos[1] (con el nuevo nodo "selected":

        var jTemp = $.extend({}, jCRUD.DataTable[n], {data: sValor}); //Subtitueix el node "data" amb el valor calculat
        nn = 0;
        nnTotal = _.size(jTemp.valors_admesos);
        while (nn < nnTotal) {
            // Bucle en cas de tenir una llista de valors en un <select>, el qual marcarà com a "selected" el <option> que correspon al valor
            if (jTemp.valors_admesos[nn].valor === sValor) {
                jTemp.valors_admesos[nn] = $.extend({}, jTemp.valors_admesos[nn], {selected: 'selected'}); // Marco el valor del camp com a seleccionat a dins la llista
            }
            nn++;
        }
5
  • Mira el último parrafo de mi respuesta. ¡ y no te olvides de puntuar ? ;-)
    – Trauma
    Commented el 12 nov. 2016 a las 12:33
  • Dices que, después de ejecutar el $.extend( ), data:sValor aparece también dentro de jCRUD.DataTable[n], además de en jTemp ?
    – Trauma
    Commented el 12 nov. 2016 a las 14:22
  • Porque eso no puede ser. ¿ seguro que data no está ya en jCRUD.DataTable[n] ?
    – Trauma
    Commented el 12 nov. 2016 a las 14:25
  • si, data ya está en `jCRUD.DataTable[n] has mirado el ejemplo jsfiddle.net/u44eg64y/17 ?
    – Seak
    Commented el 12 nov. 2016 a las 14:43
  • Ok. Respuesta actualizada con tu nuevos fuentes.
    – Trauma
    Commented el 12 nov. 2016 a las 15:11

1 respuesta 1

1

De la documentación de jQuery:

$.extend( target, obj1, \[ obj2 \] )
Añade el contenido de los obj1, obj2, al target, y devuelve este último.

Es decir, que el comportamiento correcto y esperado es el que tú das por erróneo. Lo raro es el primer caso, que según dices, no hace lo mismo... ¿Seguro que en el primer caso que expones, ambos, jTemp y jDef, no terminan con los mismos atributos?

  • Si lo que quieres es añadir un atributo a un objeto ya creado, es tan fácil como hacer una simple asignación.

  • Si lo que quieres es obtener un objeto que mezcle otros 2, sería:

    result = $.extend( { }, obj1, obj2 }
    


Descripción

$.extend( ) extiende el objeto pasado como primer argumento con los atributos de los otros objetos, y devuelve ese primer argumento. Como le pasamos un objeto vacío, sin contenido previo, copia el contenido de los otros 2 objetos sobre ese objeto vacio; al finalizar, target contiene todos los atributos contenidos en los otros 2, que no han sido modificados.

Por último, $.extend( ) nos devuelve el objeto que le pasamos como primer argumento (recordemos que los objetos se pasan por referencia), con lo que ya tenemos nuestra operacion union realizada.


Ejemplo:

function obtenerBBDD() {
    return [{cod: 1, desc: '111'}, {cod: 2, desc: '222'}];
}

var jDef = {id: 'hola', valores: obtenerBBDD()};
// jDef = {"id":"hola","valores":[{"cod":1,"desc":"111"},{"cod":2,"desc":"222"}]}

var jTemp = $.extend({ },  jDef);
// jTemp = {"id":"hola","valores":[{"cod":1,"desc":"111"},{"cod":2,"desc":"222","selected":true}]}

Aqui empezamos con los problemas. jTemp["valores"] no es un objeto independiente, es una referencia al "valores" contenido en jDef.

Es decir, jTemp.valores es el mismo objeto que jDef.valores. Por lo tanto, cualquier cambio a uno de ellos afecta al otro.

Posibles soluciones

  1. Usar $.extend( ) con un argumento true inicial, para que haga una copia recursiva:

    var jTemp = $.extend( true, { }, jDef )
    

    Según la documentación, ese true inicial forzará la copia recursiva, de modo que jTemp y jDef no estén enlazados, y se resuelva el problema.

  2. Usar otra librería, que sí realice un deep copy, si jQuery no lo permite.

10
  • he editado mi pregunta, pues no era exactamente mi caso. A ver si ahora está mejor. Me interesa que jTemp.valores no esté vinculado con jDef.valores (me lo cambia).
    – Seak
    Commented el 12 nov. 2016 a las 12:31
  • Vale, entiendo que devuelve el mismo objeto que el original (con los cambios y por referencia).
    – Seak
    Commented el 12 nov. 2016 a las 12:49
  • De que forma puedo conseguir un nuevo objeto? Con el contenido de jDef?
    – Seak
    Commented el 12 nov. 2016 a las 12:50
  • No entiendo lo que dices ahora. Lo de un nuevo objeto, ya te lo he explicado. Pasa 3 argumentos a extend: un objeto vacio, y otros 2, que te los mezclará en el primero, que estaba vacio.
    – Trauma
    Commented el 12 nov. 2016 a las 12:52
  • Lo pruebo en un rato (estoy en la calle) , pero diria que ya lo habia hecho
    – Seak
    Commented el 12 nov. 2016 a las 12:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.