Combining String Elements in Multidimensional Array with JavaScript

I currently have a 2D array filled with student profiles. In the first column, we have First Names, in the second Middle Names, and in the third Last Names, continuing on to other columns.

My objective is to merge the text from all three columns, convert it into uppercase, and then insert it back into Column 1 as "FIRSTMIDDLELAST" in cell A1.

The code snippet I've provided below seems quite straightforward but since I'm fairly new to JS, I encounter an error when trying to execute it...

Cannot read property "0" from undefined.

@ line

StudentList[i][0].concat(FistName,MidlName,LastName);

for (var i=0; i<StudentList.length; i++){
      var FistName = StudentList[i][0].valueOf().toUpperCase();
      var MidlName = StudentList[i][0].valueOf().toUpperCase();
      var LastName = StudentList[i][0].valueOf().toUpperCase();

       StudentList[i][0].concat(FistName,MidlName,LastName);
    }    

Any assistance would be highly appreciated. Thank you so much in advance.

UPDATE:

This excerpt provides a glimpse of the Google Spreadsheet where my array originated ....

First   Middle   Last     Age  Grade  English  Maths
John    Peter    Smith    17   12     A        A
Kevin   Paul     James    16   11     B        C
Kim     Caroline Anderson 15   10     B        A
.... and so forth

Answer №1

It appears that the code is correct, but there may have been an issue with the array value.

var StudentList = [];
StudentList.push(['First', 'Middle', 'Last']);

document.write('original: ' + StudentList.toString() + '<br/>');
for (var i=0; i<StudentList.length; i++){
  var FistName = StudentList[i][0].valueOf().toUpperCase();
  var MidlName = StudentList[i][1].valueOf().toUpperCase();
  var LastName = StudentList[i][2].valueOf().toUpperCase();


  //StudentList[i][0].concat(FistName,MidlName,LastName);
  StudentList[i][0] = FistName.concat(MidlName,LastName); //it seems this is what was intended
};
document.write('modified: ' + StudentList.toString());

Answer №2

If your data structure follows the format you've described:

var StudentList = [
  ['fname1','mname1','lname1'],
  ['fname2','mname2','lname2'],
  ['fname3','mname3','lname3']
];

You can transform it using this code snippet:

for (var i = 0; i < StudentList.length; i++) {
  var FirstName = StudentList[i][0].toUpperCase();
  var MiddleName = StudentList[i][1].toUpperCase();
  var LastName = StudentList[i][2].toUpperCase();

  StudentList[i][0] = FirstName + MiddleName + LastName;
}

/*
[
  [
    "FNAME1MNAME1LNAME1",
    "mname1",
    "lname1"
  ],
  [
    "FNAME2MNAME2LNAME2",
    "mname2",
    "lname2"
  ],
  [
    "FNAME3MNAME3LNAME3",
    "mname3",
    "lname3"
  ]
]
*/

Key points to note:

  1. Avoid unnecessary use of .valueOf() to retrieve values;
  2. concat doesn't alter the original value, so assign the concatenated result back to StudentList[i][0];
  3. Use the '+' operator for string concatenation in JavaScript;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain a compilation of items present in every tier of nesting

{ "Alice Smith": { "Age": 20, "Gender": "F" }, "Bob Johnson": { "Age": 22, "Gender": "M" }, "Eve Michaels":{ "Age": 25, "Gender": "F" } } Can someone assist me in obtaining an array w ...

How can I transform this dynamic ajax function into Vue.js?

I have a single jQuery function for performing AJAX requests and I use it for multiple processes. <div id="status"> <div id="waiting"></div> <div id="success"></div> <div id="warning"></div> <di ...

Tips for adding a value to a specific object in an array

I am currently utilizing Vue along with Vuetify's v-data-table to display some data. Everything is functioning as expected, but I also need to incorporate data from another API. Therefore, I am looking for a way to add items to an array of objects. ax ...

MongoDB: Issue updating the 'role' field of a document

Recently, I've run into an issue where I am unable to update the 'role' of a specific document. The document in question is a 'user' object within the MEANjs User schema, and it has a pre-defined property for roles. Here is the sec ...

Having trouble getting OrbitControls to function properly in Object-Oriented Programming (OOP)

Exploring the world of THREE.js and Object-oriented JavaScript. Here's the code I'm working with: https://gist.github.com/BobWassermann/581492be11db361c39ee While my browser is showing the correct output, I'm having trouble getting the Orb ...

Encountering difficulties sending modified object values to Node/Express in JavaScript

I am currently working on a project that involves fetching specific stock data from Yahoo Finance based on the user's selection and then transmitting this data to a Node/Express server. ISSUE: Despite everything else functioning correctly, the Node/E ...

Tips for interpreting the JSON data returned by a Node server in Angular

When trying to implement a login form in my Angular frontend, I encountered an issue with reading the JSON object returned from my node.js server. Despite following the correct steps, the console displays "undefined" as if it cannot recognize the format. ...

Discover the prevalent string within an array

Looking at an array, which can vary in size, like this: x = ["1.111", "1.122", "1.250", "1.111"] I am trying to identify the most frequent value ("1.111" in this instance). Is there a simple way to accomplish this task? Thanks in advance! Correc ...

Python Programming: Specialized Formatting of Text Data

Note: I am currently using Python 3.5.2 with the standard Shell and IDLE. Hello everyone, one of the most challenging tasks for me when programming in Python is working with strings. Can anyone offer some assistance? One issue I frequently encounter is t ...

How to implement Ajax to immediately display the first comment created on a webpage

Currently, my application can add comments to microposts that already have existing comments. Here is the simplified version of _micropost.html.erb: <li id="micropost-<%= micropost.id %>"> <span class="content"> <%= micropost.co ...

The jQuery Bootstrap extension functions correctly on Firefox, but encounters compatibility issues on IE10

My code is based on jQuery 2.1 and bootstrap 3.2. It runs smoothly in Firefox, but encounters issues in IE10. I have added <meta http-equiv="X-UA-Compatible" content="IE=edge"> to the header to address compatibility mode concerns, yet the problem per ...

Binding hover and load events using jQuery on elements that are dynamically generated

One should note that the click event can be successfully bound to an element with the class name keybox, even if this element is dynamically generated. The code for this would look like: $('body').on('click', '.keybox', funct ...

serializeArray encounters difficulty in locating certain input elements

I've created this HTML layout: <div class="col-md-12"> <div class="form-group"> <label>Mini description (displaying the latest added destinations and meta description)</label> <textarea class="for ...

Ways to reduce the size of images within a bootstrap carousel

I'm currently working on creating a carousel that will serve as a background image cover for my website, similar to the revolutionary slider in WordPress but without using a plugin. I am developing it specifically for my static website. The challenge ...

Storing the $_session['username'] variable within an ajax function

I've been working on a script and I've reached the point where I need to add protection. However, I'm having trouble retrieving the $_session['username']. I can't use cookies because they are vulnerable to being faked, posing ...

Adding flair to the encompassing container

Below is the HTML code that I am working with: <div class="um-field field-date"> <p class="form-row " id="date_field"> <label class="date"> <input data-label="Date" data-value="" type="date" class="input-date um-frontend-f ...

A specialized HTTP interceptor designed for individual APIs

Hey there, I am currently working with 3 different APIs that require unique auth tokens for authentication. My goal is to set up 3 separate HTTP interceptors, one for each API. While I'm familiar with creating a generic httpInterceptor for the entire ...

Preserve data across all pages using sessions

On my website, I have a pagination system where each page displays 10 data entries. Whenever a user clicks on the pagination buttons, it triggers a request to the database to fetch the corresponding records. Each data entry also includes a button that can ...

"Headers cannot be set once they have been sent to the client... Error handling for unhandled promise rejection

Having trouble with cookies in the header - specifically, encountering an error at line number 30. The error message reads: "Cannot set headers after they are sent to the client." Additionally, there is an UnhandledPromiseRejectionWarning related to a prom ...

Validation needed for data list option

Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...