Javascript array loop creating multiple arrays instead of 1 array [duplicate]

Question

I have the code below:

var arrAllBaseJSON = [];
for(var i=0; i < totalCols; i++) {
    var heading = document.getElementById("heading"+i).value;
    var dataType = document.getElementById("dataType"+i).value;
    arrAllBaseJSON['Heading'] = heading;
    arrAllBaseJSON['Type'] = dataType;
    arrAllBaseJSON.push();
    console.log(arrAllBaseJSON)
}

This produces the following in the console.

[Heading: "ID", Type: "Text"]
[Heading: "First Name", Type: "Text"]
[Heading: "Last Name", Type: "Text"]
[Heading: "Month", Type: "Text"]
[Heading: "Cost", Type: "Text"]
[Heading: "DOB", Type: "Text"]

I would like the output to be one array with each loop to be surrounded by braces:

[{Heading: "ID", Type: "Text"},
{Heading: "First Name", Type: "Text"},
{Heading: "Last Name", Type: "Text"},
{Heading: "Month", Type: "Text"},
{Heading: "Cost", Type: "Text"},
{Heading: "DOB", Type: "Text"}]

Would appreciate help!

Sherman Hui · Accepted Answer · 2018-02-17 09:01:57Z

3

Try this

let arrAllBaseJSON = []
for(let i = 0; i < totalCols; i++) {
  let heading = document.getElementById("heading"+i).value;
  let dataType = document.getElementById("dataType"+i).value;
  arrAllBaseJSON.push({
    heading,
    dataType
  });
}

edited Feb 17, 2018 at 9:01

Sherman Hui

1,0183 gold badges11 silver badges22 bronze badges

answered Feb 17, 2018 at 8:53

CodeLover

5692 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2547766 Over a year ago

Thanks so much that's doing exactly what I want! Could I ask how I would retrieve just the dataType? I thought the below would work but it's coming up with undefined. console.log(arrAllBaseJSON.dataType)

CodeLover Over a year ago

since arrAllBaseJSON is an array, you could retrieve each javascript object like arrAllBaseJSON[i] then use the dot operator . to get the dataType value like console.log(arrAllBaseJSON[i].dataType);

Hassan Imam · Accepted Answer · 2018-02-17 08:54:03Z

0

You need to create a new object inside the loop and push it in the array.

var arrAllBaseJSON = [];
for (var i = 0; i < totalCols; i++) {
 var heading = document.getElementById("heading" + i).value;
 var dataType = document.getElementById("dataType" + i).value;
 var obj = {};
 obj['Heading'] = heading;
 obj['Type'] = dataType;
 arrAllBaseJSON.push(obj);
}
console.log(arrAllBaseJSON)

answered Feb 17, 2018 at 8:54

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

Ankit Agarwal · Accepted Answer · 2018-02-17 08:57:51Z

0

Here is how you can do it:

//remove this
var totalCols = 3
var arrAllBaseJSON = [];
for(var i=0; i < totalCols; i++) {
  var heading = document.getElementById("heading"+i).value;
  var dataType = document.getElementById("dataType"+i).value;
  arrAllBaseJSON.push({
    heading: heading,
    dataType: dataType
  });
}

console.log(arrAllBaseJSON);

<input type='text' id='heading0' value='ID' />
<input type='text' id='dataType0' value='Text' /><br/>
<input type='text' id='heading1' value='First Name' />
<input type='text' id='dataType1' value='Text' /><br/>
<input type='text' id='heading2' value='Last Name' />
<input type='text' id='dataType2' value='Text' />

answered Feb 17, 2018 at 8:57

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

Javascript array loop creating multiple arrays instead of 1 array [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related