An array becomes undefined once the previous array is removed

Consider the following code snippet: using the splice method, a specific item from Array1 is retrieved and stored in a variable called Popped. Next, Popped is added to array2. However, if we then delete the value from Popped, why does array2 become undefined even though the value was previously pushed into it?

let Array1 = [
{id: 1, name: "APPLES"},
{id: 2, name: "ORANGE"},
{id: 3, name: "PEAR"},
{id: 4, name: "MANGO"}];
let array2 = [];

let popped  = Array1.splice(0, 1)
array2.push(popped);
console.log("Array2: ", array2[0][0].name)
document.querySelector("#First").innerHTML = "First: " + array2[0][0].name;
delete popped[0]; //why when we delete popped, value is undefined  ? 
document.querySelector("#Second").innerHTML = "Second: " + array2[0][0].name; // undefined

Answer â„–1

When adding "popped" to the array, it is important to create a new array rather than just referencing it.

array2.push([...popped]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the quantity of items within a JSON array

There is a json array located at the following url: http://localhost/heart/api/restApiController/dataset.json The structure of the json array is as follows: [ { Weight: "3", Smoking: "1", Exercising: "0", Food_habits: ...

Utilizing mutation observers for monitoring dynamic changes in fetch request outcomes

I'm currently developing a specialized interface that showcases the cumulative ticket count (an integer representing the total) sourced from a 3rd party API. My goal is to trigger a notification whenever this count increases. I've come across inf ...

What is preventing WebRTC from re-establishing connection after being disconnected?

In my current React web application project, I am implementing a feature where users can engage in group calls using WebRTC through a NodeJS server running Socket.IO. The setup allows for seamless joining and leaving of the call, similar to platforms like ...

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...

Guidelines for utilizing recursion in order to calculate the sum of specified values within a multidimensional array

I am dealing with a complex object data that resembles the structure provided below. My objective is to calculate the total direct package values for the top users, or "parents" compute the combined nested indirect package values from the subtree of "ch ...

The Vercel public domain is not functioning as expected

After successfully developing a next.js application with user auth using NextAuth and deploying it to Vercel, I encountered an issue related to the notifications page functionality. The problem arises when the app checks for an active session; if none is f ...

Customize the border width and color of a specific column in HighCharts based on dynamic data

I am looking to dynamically change the border width and color of only one column in a basic column chart. Here is an example: var chartingOptions = { chart: { renderTo: 'container', type: 'column' }, xAxis: { categories: [ ...

Tips for sorting through the properties of the Record<K, T>:

Let's say we have the following data stored in a record: export const MenuData: Record<Header, HeaderInfo> = { val1: { message: 'xyz', buttonText: 'txt', buttonUrl: '/url-abc', }, val2: { messa ...

What causes the "Type Any does not have subscript members" Error in Swift 3.0?

I have been closely following the steps outlined in this guide... However, I am encountering a persistent error message. Whenever I run the code, I keep encountering the "Type Any has no subscript members Error" within this function... func allItems( ...

Error message "ag-grid: Unable to perform the key.forEach function in the console when resizing columns"

Within the application I am working on, I have implemented the ag-grid view. To address the issue related to the last empty pseudo column, I decided to resize the last displayed column using the 'autoSizeColumns' method of ag-grid. While this sol ...

Creating form elements in ReactJS dynamically and storing their values in an array

I need to render 3 materialUI TextFields multiple times, depending on the integer input by the user before rendering the form fields (the integer is stored in a variable called groupMembersCount). I am using a functional component in ReactJS with an array ...

Using the spread operator in combination with the reduce function in JavaScript

I am attempting to generate all possible paths of the provided JSON object. I have managed to generate the paths, but I would like the final array to be flattened without any nested arrays inside it. I tried spreading the array, but there are still some ne ...

Issue with AJAX show/hide causing scrolling to top

I've implemented ajax show hide functionality to display tabs, but whenever I scroll down to the tab and click on it, the page scrolls back to the top. You can check out the example code in this fiddle: http://jsfiddle.net/8dDat/1/ I've attempt ...

Is Socket.io exclusive to browsers?

Similar Question: Using socket.io standalone without node.js How to run socket.io (client side only) on apache server My website is hosted on a Linux server with shared hosting. Since I don't have the ability to install node.js, I am looking ...

Stop auto-scrolling to the top when triggering a getJSON request

I'm feeling really puzzled at the moment. Here is the snippet of code I am struggling with: $("#combinations").on("change", "input", function (e) { e.preventDefault(); console.log(e) var $button, $row, $group, $form, $barcode ...

Reducing SCSS import path in Angular 7

Creating a component that is deeply nested raises the issue of importing shared .scss files with long paths: @import '../../../app.shared.scss'; This hassle doesn't exist when it comes to .ts files, thanks to the configuration in tsconfig. ...

JavaScript - Utilizing jQuery to dynamically add and remove input fields

I have a form where input fields (groups) are added dynamically. Here's a glimpse of the complex form: FIDDLE The error on the console reads: Error: uncaught exception: query function not defined for Select2 s2id_autogen1 With existing fields in t ...

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

Beginner coder here, testing my skills with a self-assigned task. I've created a carousel using Bootstrap 5 with three slides, each containing two lines of captions. As the slides transition, the captions move in opposite directions—up and down. Ho ...

Tips for efficiently combining mergeMap observables and providing a singular value for the entire observable

Consider this particular case involving TypeScript/angular with rxjs 6.5: main(){ const items = ['session', 'user']; const source: Observable<any> = from(items); source .pipe( ...

The suspense fallback function seems to be missing in NextJS 13

I'm in the process of creating an application to demonstrate the functionality of Suspense in Nextjs 13. However, I'm encountering an issue where the Suspense fallback is not appearing during loading. Below is the code for page.js import React, ...