Disappearance of array data

Question

Disappearance of array data

I have been working on creating an array of objects with nested arrays, but I am facing an issue where data seems to go missing in the final step:

const args_arr = [];
const options_arr = [];
let options = '';

let text = "";
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    if (i === j) {
      args_arr.push(true);
    } else {
      args_arr.push(false);
    }
  }
  text += args_arr + "<br>";
  options = {
    op1: true,
    op2: false,
    args: ['visible']
  };
  text += JSON.stringify(options) + "<br>";
  options.args.push(args_arr);
  text += JSON.stringify(options) + "<br>";
  options_arr.push(options);

  args_arr.length = 0;
}
text += '<br>' + JSON.stringify(options_arr) + "<br>";

document.getElementById("demo").innerHTML = text;

<pre id="demo"></pre>

All my code appears to be running correctly, except at the last stage when adding options to options_arr, some arrays after 'visible' are disappearing.

This is the outcome I'm observing:

true,false,false,false,false
{"op1":true,"op2":false,"args":["visible"]}
{"op1":true,"op2":false,"args":["visible", [true,false,false,false,false]]}
...

Can you help me identify what might be causing this issue?

javascript

Answer 1

Answer №1

The issue arises when pushing the elements from args_arr into options_arr and then making modifications to the information.

To resolve this, replace options.args.push(args_arr); with

options.args.push([...args_arr]);

This change will create a new array with values copied from args_arr, preventing it from being reset during each iteration.

Answer 2

The issue arises when pushing the elements from args_arr into options_arr and then making modifications to the information.

To resolve this, replace options.args.push(args_arr); with

options.args.push([...args_arr]);

This change will create a new array with values copied from args_arr, preventing it from being reset during each iteration.

Answer 3

Answer №2

Make sure to create a new args_arr for each iteration

const options_arr = [];
let options = '';
let text = [];
let args_arr = [];
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    if (i === j) {
      args_arr.push(true);
    } else {
      args_arr.push(false);
    }
  }
  text.push(args_arr);
  let options = {
    op1: true,
    op2: false,
    args: ['visible']
  };
  options.args.push(args_arr);
  text.push(JSON.stringify(options))
  options_arr.push(options);
  args_arr = [];
}
text.push('<hr/>')
text.push(JSON.stringify(options_arr,null,2))

document.getElementById("demo").innerHTML = text.join('<br/>');

<pre id="demo"></pre>

Answer 4

Make sure to create a new args_arr for each iteration

const options_arr = [];
let options = '';
let text = [];
let args_arr = [];
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    if (i === j) {
      args_arr.push(true);
    } else {
      args_arr.push(false);
    }
  }
  text.push(args_arr);
  let options = {
    op1: true,
    op2: false,
    args: ['visible']
  };
  options.args.push(args_arr);
  text.push(JSON.stringify(options))
  options_arr.push(options);
  args_arr = [];
}
text.push('<hr/>')
text.push(JSON.stringify(options_arr,null,2))

document.getElementById("demo").innerHTML = text.join('<br/>');

<pre id="demo"></pre>

Answer 5

Answer №3

It seems a bit unclear what your intention is, but perhaps cleaning up your code could offer some insights into the issue at hand.

const options_array=[];

let message = "";
for (let index = 0; index < 5; index++) {
    let choice={
      opt1:true,
      opt2:false,
      arguments:['visible',[]]
  };
  for (let j=0;j<5;j++)
   choice.arguments[1].push(index===j);
  options_array.push(choice);
}
message += JSON.stringify(options_array) ;

document.getElementById("output").innerHTML = message;

Answer 6

It seems a bit unclear what your intention is, but perhaps cleaning up your code could offer some insights into the issue at hand.

const options_array=[];

let message = "";
for (let index = 0; index < 5; index++) {
    let choice={
      opt1:true,
      opt2:false,
      arguments:['visible',[]]
  };
  for (let j=0;j<5;j++)
   choice.arguments[1].push(index===j);
  options_array.push(choice);
}
message += JSON.stringify(options_array) ;

document.getElementById("output").innerHTML = message;

Answer 7

Answer №4

For incorporating the spread operator into pushing args_arr to the`options.args` array, you can use this method:

options.args.push(...args_arr);

Answer 8

For incorporating the spread operator into pushing args_arr to the`options.args` array, you can use this method:

options.args.push(...args_arr);

Disappearance of array data

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Numerous objects come into view as you scroll

Modify content or display picture within accordion panel based on its identifier

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

Bar Chart Data Label Problem with HighCharts

Utilizing Ajax to Invoke Wordpress Functions from a Client's Browser

Unlocking Google contact pictures using Google contacts API - A step-by-step guide

Is there a way to implement an event listener for a customized select element within a table on a webpage?

Surprising use of template string value

Ways to categorize items using JQuery based on their hierarchical structure

Connecting nodes to edges based on their unique ids in the d3.js graph library

The extent of the modal window (AngularJS directive)

Vue.js error: Reaching maximum call stack size due to failed data passing from parent to child component

Retrieve events triggered by each element

Transforming JSON information for Google chart data table

Having trouble with Angular's ng-tags-input? Are you getting the error message "angular is not defined"? Let

What are some tips for managing the hover effect using CSS3?

Switching over to styled components from plain CSS using a ternary operator

What could be causing the "Cannot POST /api/" error to occur when attempting to submit a form?

What is the most effective way to transfer information from one page to another in a PhoneGap application?

Is there a way to use Jquery to determine if a parent div contains a scroll