CODEWITHSUNDEEP
typescriptionic-framework
Wrong
Wrong

Reputation: 1253

Typescript - Changes on variable are being reflected on another variable

I have this small piece of code:

this.videosProvider.getVideos().subscribe(videos => {
    this.videos = videos;
    this.videosAux = videos;
    console.log(this.videosAux[0].videos)
});

What the variable videos from the subscribe returns is:

[
{
    "categoria": "Tus dudas de salud",
    "videos": [
        {
            "id": "oiVn4NUJo_k",
            "titulo": "La fiebre: mitos y verdades",
            "url": "https://www.youtube.com/embed/oiVn4NUJo_k",
            "miniatura": "https://img.youtube.com/vi/oiVn4NUJo_k/mqdefault.jpg"
        },
        {
            "id": "1l_tbEZwBjs",
            "titulo": "¿Por qué estornuda un recién nacido?",
            "url": "https://www.youtube.com/embed/1l_tbEZwBjs",
            "miniatura": "http://img.youtube.com/vi/1l_tbEZwBjs/mqdefault.jpg"
        }
    ]
}
]

Like the way the first code is right now, it prints the videos properly. But if I do:

    this.videosProvider.getVideos().subscribe(videos => {
        this.videos = videos;
        this.videos[0].videos = [];
        this.videosAux = videos;
        console.log(this.videosAux[0].videos)
    });

It prints an empty array. Also if I print videos the same happens. Why is this? I'm changing the value on this.videos not this.videosAux. The only thing I can think of is that it's somehow related by reference, but I don't understand why or how to fix it.

Can you give me a hand on this?

Upvotes: 0

Views: 689

Answers (2)

Adrien De Peretti
Adrien De Peretti

Reputation: 3662

Hey if you want to get a copy of the array into your different variable, you can do

this.videos = videos.slice();

this.videosAux = videos.slice()

without any parameter.

Upvotes: 1

Gregor Ojstersek
Gregor Ojstersek

Reputation: 1379

It's because arrays and objects are passing through reference and not as a copy like strings, numbers, booleans do. You need to copy an array to a new independent one. Because you have array of objects, you can use JSON.parse(JSON.stringify(videos)).

this.videosProvider.getVideos().subscribe(videos => {
    this.videos = JSON.parse(JSON.stringify(videos));
    this.videos[0].videos = [];
    this.videosAux = JSON.parse(JSON.stringify(videos));
    console.log(this.videosAux[0].videos)
});

Example for testing:

let someArray = [
{
    "categoria": "Tus dudas de salud",
    "videos": [
        {
            "id": "oiVn4NUJo_k",
            "titulo": "La fiebre: mitos y verdades",
            "url": "https://www.youtube.com/embed/oiVn4NUJo_k",
            "miniatura": "https://img.youtube.com/vi/oiVn4NUJo_k/mqdefault.jpg"
        },
        {
            "id": "1l_tbEZwBjs",
            "titulo": "¿Por qué estornuda un recién nacido?",
            "url": "https://www.youtube.com/embed/1l_tbEZwBjs",
            "miniatura": "http://img.youtube.com/vi/1l_tbEZwBjs/mqdefault.jpg"
        }
    ]
}
];

const otherArray = JSON.parse(JSON.stringify(someArray));
someArray[0].videos = [];
console.log(otherArray);

Upvotes: 1

Related Questions