JavaScript sorting array by name

Question

I am sorting an array contains objects. I am sorting the last name based on alphabetical order. But when I print out, only the first item of the sorted array appear and it filled the array. What is mean is array =[{name: "White, David", score:100},{name: "Bee, Axis", score:101}] after sorting by last name the array becomes array =[{name: "Bee, Axis", score:101},{name: "Bee, Axis", score:101}], all the information are the same. I don't know what was wrong?

here is to populate the array:

for (let i = 0; i < 10; i++)
{
    record.Customer= customerName[i];
    record.MonthlyCharge = monthlyCharge[i];
    record.PastDueAmount = pastDueAmount[i];
    record.DaysPastDue = numDaysPastDue[i];
    records.push(record); 
    
    table += `<tr>`;
    table +=`<td>${record.Customer}</td>`;
    table +=`<td>$${record.MonthlyCharge}</td>`;
    table +=`<td>$${record.PastDueAmount}</td>`;
    table +=`<td>${record.DaysPastDue}</td>`;
    table +=`</tr>`;
}
tableBody.innerHTML = table;

To sort the array

nameColumn.addEventListener("click", function (){
    records.sort((a,b)=>a.Customer.localeCompare(b.Customer));
    updateTable();
});

function updateTable()
{
    let table = "";
    for (let record of records)
    {
        table += `<tr>`;
        table +=`<td>${record.Customer}</td>`;
        table +=`<td>$${record.MonthlyCharge}</td>`;
        table +=`<td>$${record.PastDueAmount}</td>`;
        table +=`<td>${record.DaysPastDue}</td>`;
        table +=`</tr>`;
    }
    tableBody.innerHTML = table;
}

Are customerName, monthlyCharge, pastDueAmount, and numDaysPastDue separate arrays and you have to build an array of objects every time? Or do you already have an array of objects? — zer00ne
– zer00ne, Commented Jun 4, 2021 at 3:45

Ivo Monti · Accepted Answer · 2021-06-03 23:41:06Z

3

Your problem lies in the code that populates the table. You are always referencing the same record object and changing its values every time. That's why all records appear to have the values of your last input. Here's how it should be:

for (let i = 0; i < 10; i++)
    {
        // you need to instantiate a new record if it's a class or simply create a new object
        record = {}
        record.Customer= customerName[i];
        record.MonthlyCharge = monthlyCharge[i];
        record.PastDueAmount = pastDueAmount[i];
        record.DaysPastDue = numDaysPastDue[i];
        records.push(record); 
        
        table += `<tr>`;
        table +=`<td>${record.Customer}</td>`;
        table +=`<td>$${record.MonthlyCharge}</td>`;
        table +=`<td>$${record.PastDueAmount}</td>`;
        table +=`<td>${record.DaysPastDue}</td>`;
        table +=`</tr>`;
    }
    tableBody.innerHTML = table;

edited Jun 3, 2021 at 23:41

answered Jul 14, 2020 at 16:25

Ivo Monti

663 bronze badges

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

2 Comments

Heretic Monkey Over a year ago

Or use object literal syntax and var to ensure correct scoping:

var record = { Customer:  customerName[i], MonthlyCharge: monthlyCharge[i], PastDueAmount: pastDueAmount[i], DaysPastDue: numDaysPastDue[i] };

You should probably use var (or const in more recent browsers) in any case...

Dong Y Over a year ago

Appreciate your help

Collectives™ on Stack Overflow

JavaScript sorting array by name

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related