Question 304707 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Array data going missing

I’m trying to create an array of objects with nested arrays, but data is going missing in the last 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>

Everything works as expected, but at the last step where I push options into options_arr the arrays after ‘visible’ goes missing.

Here’s the result:

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

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

What am I doing wrong?

Tags:

4

Answers


  1. 0

    The problem is because you push the args_arr into the options_arr and modify the info afterwards.

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

    What it will do is copy the values from args_arr into a new array. This way it will not reset on every loop.

    Login or Signup to reply.
  2. 0

    You need a new args_arr per loop

    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>
    Login or Signup to reply.
  3. 0

    Not really clear what you want to do. but you may clean your code. it will help realise the issue.

    const options_arr=[];

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

document.getElementById("demo").innerHTML = text;
    Login or Signup to reply.
  4. 0

    You should add the spread operator while pushing args_arr into options.args array.

    options.args.push(… args_arr);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search