Obtain a roster of given names along with last initial, if needed

Question

Obtain a roster of given names along with last initial, if needed

Within my JavaScript code, I have an object structured as follows:

[
    {
        firstname: "John",
        lastname: "Smith"
    },
    {
        firstname: "Peter",
        lastname: "Gregory"
    },
    {
        firstname: "John",
        lastname: "Fisher"
    },
    {
        firstname: "Sam",
        lastname: "Fisher"
    }
]

My goal is to present the first names in a comma-separated string. The challenge lies in displaying the first initial of the last name only when necessary to differentiate two individuals with the same first name.

Ultimately, the output should resemble this:

John S., Peter, John F., Sam

Up until now, I've managed to create a loop that retains past initials. However, the obstacle arises with the fourth entry in the given example; an individual whose last name sets them apart from others but does not share a first name with anyone.

What would be the most efficient approach to tackle this issue?

javascript arrays string formatting

Answer 1

Answer №1

To achieve this task, you can use Array.map along with Array.join. At the bottom of this answer, I have included a polyfill for Array.map in case you require it.

var people = [
{
    firstname: "John",
    lastname: "Smith"
},
{
    firstname: "Peter",
    lastname: "Gregory"
},
{
    firstname: "John",
    lastname: "Fisher"
},
{
    firstname: "Sam",
    lastname: "Fisher"
}
]

/* Count number of firstNames */
var firstnames = {};
for (var i = 0; i < people.length; i++) {
   if (!firstnames[people[i].firstname]) {
       firstnames[people[i].firstname] = 0;
   }
   firstnames[people[i].firstname] ++;
}

/* Create the string of names */
var peopleString = people.map(function (a) {
   /* Check if we need a last name here */ 
   var lastname = firstnames[a.firstname] > 1 ? (a.lastname ? ' ' + a.lastname.substr(0, 1) + '.' : '') : '';
   
   return a.firstname + lastname; 
}).join(', ');

document.write(peopleString);


/*Polyfill for Array.map taken from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill*/
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this| 
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal 
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len) 
    //    where Array is the standard built-in constructor with that name and 
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k < len
    while (k < len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal 
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal 
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal 
        //     method of callback with T as the this value and argument 
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}

Answer 2

To achieve this task, you can use Array.map along with Array.join. At the bottom of this answer, I have included a polyfill for Array.map in case you require it.

var people = [
{
    firstname: "John",
    lastname: "Smith"
},
{
    firstname: "Peter",
    lastname: "Gregory"
},
{
    firstname: "John",
    lastname: "Fisher"
},
{
    firstname: "Sam",
    lastname: "Fisher"
}
]

/* Count number of firstNames */
var firstnames = {};
for (var i = 0; i < people.length; i++) {
   if (!firstnames[people[i].firstname]) {
       firstnames[people[i].firstname] = 0;
   }
   firstnames[people[i].firstname] ++;
}

/* Create the string of names */
var peopleString = people.map(function (a) {
   /* Check if we need a last name here */ 
   var lastname = firstnames[a.firstname] > 1 ? (a.lastname ? ' ' + a.lastname.substr(0, 1) + '.' : '') : '';
   
   return a.firstname + lastname; 
}).join(', ');

document.write(peopleString);


/*Polyfill for Array.map taken from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill*/
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this| 
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal 
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len) 
    //    where Array is the standard built-in constructor with that name and 
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k < len
    while (k < len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal 
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal 
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal 
        //     method of callback with T as the this value and argument 
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}

Answer 3

Answer №2

Here's a possible solution you could implement:

let dataMap = {};
let newArray = [];
peopleList.forEach(function(person) {
    if (!dataMap.hasOwnProperty(person.firstName)) {
        let index = newArray.push(person.firstName);
        dataMap[person.firstName] = {index: index - 1, value: person};
    } else {
        newArray.push(person.firstName + " " + person.lastName.substr(0, 1));
        newArray[dataMap[person.firstName].index] = dataMap[person.firstName].value.firstName + " " + dataMap[person.firstName].value.lastName.substr(0, 1);
    }
});
console.log(newArray);

Answer 4

Here's a possible solution you could implement:

let dataMap = {};
let newArray = [];
peopleList.forEach(function(person) {
    if (!dataMap.hasOwnProperty(person.firstName)) {
        let index = newArray.push(person.firstName);
        dataMap[person.firstName] = {index: index - 1, value: person};
    } else {
        newArray.push(person.firstName + " " + person.lastName.substr(0, 1));
        newArray[dataMap[person.firstName].index] = dataMap[person.firstName].value.firstName + " " + dataMap[person.firstName].value.lastName.substr(0, 1);
    }
});
console.log(newArray);

Answer 5

Answer №3

If you're looking for a more concise solution, consider this approach:

const people = [
    {
        firstName: "Alice",
        lastName: "Smith"
    },
    {
        firstName: "Bob",
        lastName: "Johnson"
    },
    {
        firstName: "Alice",
        lastName: "Jones"
    },
    {
        firstName: "Tom",
        lastName: "Jones"
    }
];

const result = people.map(person => {
    const count = people.filter(p => p.firstName === person.firstName).length;
    return count > 1 ? `${person.firstName} ${person.lastName.charAt(0)}` : person.firstName;
}).join(", ");

console.log(result);

You can also test it on a fiddle here. Keep in mind that this solution may not be as efficient since we are looping through the entire array multiple times.

Answer 6

If you're looking for a more concise solution, consider this approach:

const people = [
    {
        firstName: "Alice",
        lastName: "Smith"
    },
    {
        firstName: "Bob",
        lastName: "Johnson"
    },
    {
        firstName: "Alice",
        lastName: "Jones"
    },
    {
        firstName: "Tom",
        lastName: "Jones"
    }
];

const result = people.map(person => {
    const count = people.filter(p => p.firstName === person.firstName).length;
    return count > 1 ? `${person.firstName} ${person.lastName.charAt(0)}` : person.firstName;
}).join(", ");

console.log(result);

You can also test it on a fiddle here. Keep in mind that this solution may not be as efficient since we are looping through the entire array multiple times.

Obtain a roster of given names along with last initial, if needed

Answer №1

Answer №2

Answer №3

Similar questions

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

What is the best way to merge append() and replaceWith() functions in jQuery?

Unable to conceal the innerHTML once the error has been rectified

How to effectively utilize ViewChildren _results in Angular 4?

Is there a way to transform a JavaScript array into JSON format in order to use it as the returned data from a RESTful API

Leveraging properties in computed Vue.js

a series of inputs in coffescript

Here is the key question: What is the best way to identify the most frequently occurring number in an array

Upload an image to a Node.js API using the Next.js API directory

Please click the provided link to display the data in the div. Unfortunately, the link disappearance feature is currently not

How can I pass the data-attribute ID from JavaScript to PHP on the same index page using ajax?

Ensure that all links are opened in a new tab

Issues with PHP jQuery AJAX functionality have been observed in Chrome and Internet Explorer, whereas the feature functions properly in Mozilla Firefox

Convert a list into nested JSON items by utilizing the getJSON function

Ways to modify the function to restrict its operation to the specific id, class, or selector

Navigating with ExpressJS

The issue with the jQuery function lies in its inability to properly retrieve and return values

Implementing a unique shader on a sprite using THREE.js

Encountered a null value while converting a string to a date, formatting it, and then converting it back to

Vue's v-for modifies the initial element within the list