How to make an array of objects from an array of elements

Question

This is driving me crazy.

I have an array like so:

myArray = ['A', 'B', 'C', 'D', 'E', 'F', ];

and my code is making a NEW object that will look like this:

myNewObj = [
 {
   name: "A",
   displayName: "A"
 },
 {
   name: "B",
   displayName: "B"
 },
 {
   name: "C",
   displayName: "C"
 },
 {
   name: "C",
   displayName: "C"
 },
 {
   name: "D",
   displayName: "D"
 },
 {
   name: "E",
   displayName: "E"
 },
 {
   name: "F",
   displayName: "F"
 }
]

My code gets values in the myArray and I want to create myNewObj

This is how I'm doing it so far

I create the new object

let newObj = [{
    "name": "",
    "displayName": ""
}];

Then I use a simple FOR NEXT loop and it work up until a point and claims newObj[i].name IS UNDEFINED... how is that possible when I'm defining it and see it in the Google dev console?

            for (let i = 0; i < myArray.length; i++) {
                newObj[i].name = myArray[i];
                newObj[i].displayName = myArray[i];

                myNewObj.push(newObj);
            }

However, I consistently get this error:

newObj[i].name is NOT DEFINED and it dies.

UPDATE: Everything's working and here's the ACTUAL real data

But as you can see, the prototype is there and when I save to sessionStorage, I get [Object,Object], x 12....

do I need to strip out name: and displayName: and put into yet another object?

Answer 1

Using Array#map:

const myArray = ['A', 'B', 'C', 'D', 'E', 'F'];

const myNewArray = myArray.map(e => ({ name: e, displayName: e }));

console.log(myNewArray);

Your solution (you need to initialize the array as [] and create a new object in every iteration to push it):

const myArray = ['A', 'B', 'C', 'D', 'E', 'F'];

const myNewArray = [];

for (let i = 0; i < myArray.length; i++) {
  const obj = {};
  obj.name = myArray[i];
  obj.displayName = myArray[i];
  myNewArray.push(obj);
}

console.log(myNewArray);