create javascript object from for loop

Question

I want to create a sortable javascript object that looks like this:

myArray = [
  {name: "Jones, James", ef: "35", mem: "2018.12.10"},
  {name: "Smith, Paul", ef: "35", mem: "2018.09.12"},
  {name: "Washington, George", ef: "35", mem: "2018.08.16"}
];

I also plan to sort myArray() by name.

myArray.sort(function(a, b){
  return a.name - b.name;
});

THE JAVASCRIPT:

function store() {
  var myArray = [];

  var i;
  for (i = 0; i < 10; i++) {
    NAME = document.getElementById('P' + i).value;
    EF = document.getElementById('E' + i).value;
    MEM = document.getElementById('M' + i).value;

    // This code doesn't seem to add records to myArray()

    myArray.push({
      name: 'NAME',
      ef: 'EF',
      mem: 'MEM'
    });
  }

  console.log(myArray.length);
}

store();

I sorted the myArray:

0: {name: "Abercrombie, Bill", rank: "1537", uscf: "9999", ef: "3", exp: "2019.01.12", …}
1: {name: "Baken, Clif", rank: "1802", uscf: "9999", ef: "3", exp: "2019.09.18", …}
2: {name: "Kukla, Ollie", rank: "2014", uscf: "0920", ef: "", exp: "2019.08.12", …}
3: {name: "Lincoln, Abraham", rank: "2023", uscf: "0119", ef: "", exp: "2019.09.06", …}
4: {name: "Washington, George", rank: "1563", uscf: "9999", ef: "3", exp: "2019.01.16", …}

How do I iterate over the sorted myArray() to populate the form? I think I need something like this:

console.log(myArray.length);

for (i = 1; i <= myArray.length; i++) {
// where id "P1" is the name input field in the form which we are populating
document.getElementById("P" +i).value = myArray[name];

}

Answer 1

There are a few issues with the code:

• you are not declaring the variables NAME, EF, MEM.

  This means these are implicit globals (!) and your code might have unintended side-effects.

  Solution: use var, let or even better, const to declare these variables in the block scope.

• You are pushing strings, not variables.

  when you do myArray.push({name: 'NAME'}) you are saying put the string value 'NAME' as the value for name.

  Solution: remove the quotes, use name: NAME, or even better, change the variable to name and use the ES2015 shorthand notation:

  myArray.push({name, ef, mem});

• prefer to use const if you are not reassigning variables. Use let in all other cases.

  This simply makes your code more robust as they have fewer quirks than using the old var.

Example:

function store() {
  const myArray = [];

  for (let i = 0; i < 10; i++) {
    // Replaced getElementByID since it's not relevant
    const name = 'some name';
    const ef = 'some string';
    const mem = 'some value';

    // This code doesn't seem to add records to myArray()

    myArray.push({name, ef, mem});
  }

  console.log(myArray.length);
}

store();

Answer 2

Since you use use jQuery, why not build myArray like this:

for (n = 1; n <= 3; n++) {
  myArray.push({
    name: $('#P' + n).val(),
    ef: $('#E' + n).val(),
    mem: $('#M' + n).val()
  });
}

For sorting the myArray: (credits to the MDN reference as well as this answer)

myArray.sort((a, b) => {
  let nameA = a.name.toUpperCase();
  let nameB = b.name.toUpperCase();
  return nameA < nameB ? -1 : nameA > nameB ? 1 : 0;
});

Then for putting back the myArray values into the corresponding input fields:

myArray.forEach((item, i) => {
  let n = i + 1;
  $('#P' + n).val(item.name);
  $('#E' + n).val(item.ef);
  $('#M' + n).val(item.mem);
  // ... do the same for other fields
});

Answer 3

Two Steps:

1- Make Array []

2- Sort its items using sort function

remember that localStorage sets and get strings so parse them using JSON.parse() method

Sort Function: (this sorts alphabetically with property name)

Array.prototype.sort()

Demo:

let result = array.sort((a.name, b.name) => a.name - b.name)