Transferring elements from one array to multiple arrays

Question

Transferring elements from one array to multiple arrays

I have been working with the basics of JavaScript arrays and here is my code snippet:

let arr = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]];
let new_arr = [];

new_arr = new_arr.concat(arr);
console.log(new_arr); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

new_arr[2].pop();
let sub_arr = [];
sub_arr = sub_arr.concat(arr);

console.log(sub_arr); //output: ['students', 'exams',[{'sub1':80, 'sub2':60}]]

The expected output for sub_arr is

['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

I attempted to use slice() but it did not yield the desired results. Please assist me with this issue.

javascript arrays json

Answer 1

Answer №1

To achieve what you need, you can perform a deep clone using JSON.parse and then JSON.stringify.

let arr = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]];
let new_arr = [];

new_arr = JSON.parse(JSON.stringify(arr));
console.log(new_arr); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

new_arr[2].pop();
let sub_arr = [];
sub_arr = sub_arr.concat(arr);

console.log(sub_arr); //output: ['students', 'exams',[{'sub1':80, 'sub2':60}]]

Answer 2

To achieve what you need, you can perform a deep clone using JSON.parse and then JSON.stringify.

let arr = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]];
let new_arr = [];

new_arr = JSON.parse(JSON.stringify(arr));
console.log(new_arr); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

new_arr[2].pop();
let sub_arr = [];
sub_arr = sub_arr.concat(arr);

console.log(sub_arr); //output: ['students', 'exams',[{'sub1':80, 'sub2':60}]]

Answer 3

Answer №2

If you want to create a deep copy of your array, here's how you can do it:

const makeDeepCopy = (obj) => JSON.parse(JSON.stringify(obj));


let originalArray = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]];
let copiedArray = [];

copiedArray = copiedArray.concat(makeDeepCopy(originalArray));
console.log(copiedArray); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

copiedArray[2].pop();
let subArray = [];
subArray = subArray.concat(makeDeepCopy(originalArray));

console.log(subArray); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

Answer 4

If you want to create a deep copy of your array, here's how you can do it:

const makeDeepCopy = (obj) => JSON.parse(JSON.stringify(obj));


let originalArray = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]];
let copiedArray = [];

copiedArray = copiedArray.concat(makeDeepCopy(originalArray));
console.log(copiedArray); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

copiedArray[2].pop();
let subArray = [];
subArray = subArray.concat(makeDeepCopy(originalArray));

console.log(subArray); //output : ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B'}]]

Answer 5

Answer №3

If you want to create a deep copy of an object, you can achieve this using a recursive function like the one demonstrated below:

const originalObj = [ 'books', 'pens', [
  { 'type1': 'gel', 'type2': 'ballpoint' },
  { 'brand_type1': 'Pilot', 'brand_type2': 'Bic' }
]];

const createCopy = (input) => {
  if (input == null) {
    return null;
  } else if (typeof input === 'string') {
    return input;
  } else if (Array.isArray(input)) {
    return input.map(item => createCopy(item));
  } else if (typeof input === 'object') {
    return Object.fromEntries(Object.entries(input)
      .map(([key, value]) => [key, createCopy(value)]));
  } else {
    return input;
  }
};

const copiedObject = createCopy(originalObj);

console.log(copiedObject);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 6

If you want to create a deep copy of an object, you can achieve this using a recursive function like the one demonstrated below:

const originalObj = [ 'books', 'pens', [
  { 'type1': 'gel', 'type2': 'ballpoint' },
  { 'brand_type1': 'Pilot', 'brand_type2': 'Bic' }
]];

const createCopy = (input) => {
  if (input == null) {
    return null;
  } else if (typeof input === 'string') {
    return input;
  } else if (Array.isArray(input)) {
    return input.map(item => createCopy(item));
  } else if (typeof input === 'object') {
    return Object.fromEntries(Object.entries(input)
      .map(([key, value]) => [key, createCopy(value)]));
  } else {
    return input;
  }
};

const copiedObject = createCopy(originalObj);

console.log(copiedObject);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Transferring elements from one array to multiple arrays

Answer №1

Answer №2

Answer №3

Similar questions

Sending an array and an object simultaneously through a single ajax request

Tips for integrating JavaScript code into React JS applications

Javascript: Issue encountered while the page was loading

Interacting with icons using TouchableOpacity and onPress functionality

Tips for populating a dictionary with a large datalist of around 2000 items

Calculate the total of items in an array based on a different regular item in the same row using PHP

What is the mechanism behind the jQuery ready function that enables its first parameter to transform into a jQuery object?

What is the best way to customize the appearance of chosen selections in the MUI Autocomplete component?

Is it possible to set a value for a jQuery function after the function has

Retrieving data arrays from response.json

Show the present category name within breadcrumbs (utilizing angularJS)

Experiencing difficulties when establishing a connection between MongoDB and Node.js

Annoying scrolling issue arising from using jQuery Buttonset

Hide an Angular button when a page is loaded, depending on the information found in a table

Challenges arise when using Bootstrap 4 for country selection

Triggering a button click to upload a file from within a grid view

Visual Studio encountered a termination error with the preLaunchTask 'build', resulting in exit code 129

Issue with Angular translation when utilizing a dynamic key variable

Using jQuery to initialize a slider with data obtained from a JSON request, which is retrieved from a PHP script

How can I retrieve elements i from each array in HandlebarsJS and then access element j, and so on?