How can I filter an array to retain only the initial 5 characters of every element?

I need help using the .map function to transform this array so that only the first 5 characters are displayed, like "01:00", "02:00"?

This is the array:

["01:00:00 AM", "02:00:00 AM", "03:00:00 AM", "04:00:00 AM", "05:00:00 AM", "06:00:00 AM", "07:00:00 AM", "08:00:00 AM", "09:00:00 AM", "10:00:00 AM", "11:00:00 AM", "12:00:00 PM", "13:00:00 PM", "14:00:00 PM", "15:00:00 PM", "16:00:00 PM", "17:00:00 PM", "18:00:00 PM", "19:00:00 PM", "20:00:00 PM", "21:00:00 PM", "22:00:00 PM", "23:00:00 PM", "00:00:00 AM"]
javascript

Answer №1

To start off, create a custom function that extracts the first 5 characters of any given string:

function extractFirstFive(str){return str.substring(0, 5)}

Next, utilize this function with the array.map method:

arr = ["Hello World", "Good Morning", "Bonjour"]  
arr.map(extractFirstFive) //=> ["Hello", "Good ", "Bonjo"]

When referring to the official documentation for array.map, it's mentioned that this function (similar to others in JavaScript) accepts another function as an argument.

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

Create a list that starts with a header determined by an object's attribute within an array

Currently in Vue, I am attempting to create a list based on a specific property within an object. The array being retrieved from the vuex store is structured as follows: const array = [ { name: "British title string" nationality: "British" }, { ...

javascriptarraysvue.jslodash

AngularJS Partial Views: Enhancing Your Website's User Experience

As a newcomer to the world of Angular, I am seeking guidance on a specific issue. I have encountered a one-to-many relationship scenario where one Category can have multiple Product items. The challenge lies in my layout page setup where I display various ...

javascripthtmlangularjsangular-routing

Updating Object Properties in Vue.js 2.0 using Methods

I am facing an issue where I have an object with blank properties in my component's data. I want to update these properties using a method that is triggered by a click event on one of the listed elements. However, when I check the click event in the c ...

javascriptobjectvue.jsmethods

I'm facing an issue where there is no "Access-Control-Allow-Origin" header present. Looking for assistance in converting it to JSONP using the POST method. Can anyone provide guidance?

Even though I have changed it to JSONP, the CORS error is still persisting. Here is the updated code snippet: $.ajax({ type: "POST", url: "<a href="https://api.api.ai/v1/" rel="nofollow noreferrer">https://api.api.ai/v1/</a& ...

javascriptjsonajaxcorsjsonp

What is the process for saving information to a database with JavaScript?

I am currently utilizing the Google Maps API for address translation, primarily through the use of a geocoder. I am interested in saving these results to a local database for future reference, as there are limitations on the total number and frequency of ...

javascriptdatabase

Unable to remove jQuery variable using jQuery .remove() method

My goal is to remove the $movieDiv that appears when I click "#buttonLicensedMovie". It successfully appends to the html and the button hides as expected. However, I am encountering an issue when clicking the anchor tag with id "licensedMovie1", the $movie ...

javascriptjquery

Unlocking the power of localhost on your mobile device

Currently, I am working on a web application that utilizes Laravel for APIs and React for the frontend. My goal is to test this application on a mobile device. While testing React in isolation works fine, I am encountering issues with backend data such a ...

javascriptphpreactjslaravelbackend

Issue with autoplay slideshow functionality not activating when opened in a new tab

The owl.carousel.js plugin is used for creating a jQuery slideshow. Initially, the slideshow works correctly, but I noticed that the autoplay feature stops working when I open a new tab in Firefox or Chrome. Demo : Demo : $(document).ready(function () ...

javascriptjqueryhtmlcssowl-carousel

Designing a Curved Stepper Component in the Shape of an S

I've been attempting to create a custom stepper component with an S-curve shape using React, but so far I haven't been successful. I even tried utilizing the MUI Stepper component and experimented with pure HTML and CSS, but couldn't achieve ...

javascripthtmlcssmaterial-uistepper

Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

I am looking to align 3 divs inside a container div, with the arrangement of [LEFT] [CENTER] [RIGHT]. The container div should be 100% wide without a fixed width, and I want the center div to stay centered even when resizing the container. The left and ...

javascriptjqueryhtmlcssalignment

The output generated by grunt-contrib-handlebars differs from that of the handlebars npm task

Looking for some help with a problem similar to the one mentioned in this Stack Overflow question. Since that question hasn't been answered yet, I decided to create my own post. I'm currently attempting to precompile my handlebars template files ...

javascriptcompilationhandlebars.jsnpmgruntjs

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

ng-bind stops updating after entering text into input field

I am a newcomer to AngularJS and I have encountered an issue that I am struggling to resolve. Although I found a similar question on stackoverflow, the solution provided did not work for me. The problem I am facing is that when I input text into any of the ...

javascripthtmlangularjsangular-ngmodel

Utilizing Axios to filter response.data in an API request

Looking to retrieve the latest 8 products based on their date? Take a look at the code snippet below: const newestProducts= []; axios.get("http://localhost:3003/products").then(response => { let products = response.data.sort(fu ...

javascriptarraysjsonapiaxios

The jQuery application adds new HTML elements to the page and then reveals the code that follows

When making an Ajax call and rendering two templates based on the response, I encountered a problem where the correct template renders but the script following it appears on the page as plain text. Here's the code snippet with the issue: if (question ...

javascriptjqueryajax

Tips for utilizing a shared controller in an Angular Material popup dialogue

Within my project, Angular Material is being used for various dialogs, primarily for alert purposes. However, I now find myself in need of a more complex dialog. The example provided on the Angular Material site showcases how to create a dialog: function ...

javascriptangularjsangular-material

Ensuring continuous user login during webpage refreshes with the help of React and local storage

Currently, I am working on implementing the use of local storage to ensure that upon refresh, the user remains logged in rather than being signed out each time. Successfully, I have been able to store data in local storage by utilizing the following code ( ...

javascriptreactjslocal-storage

Deactivating Timeout Requests in Koa Server

I keep encountering a connection reset error. I strongly believe it's stemming from a lengthy REST request, causing it to timeout. { [Error: socket hang up] code: 'ECONNRESET' } Is there a method to deactivate request timeouts within Koa, ...

javascriptnode.jscentoskoa

Tips for Updating HTML Table Content Dynamically Using JavaScript without jQuery

I am in the process of developing a web application that requires me to dynamically change the content of an HTML table based on user input, all without relying on jQuery or any other external libraries. Adding rows to the table is not an issue for me, but ...

javascripthtmlhtml-tabledom-manipulation

Achieving proper functionality of additional directives within uib-tab components

How can I utilize a callback function for uib-tab directives to refresh inner directives after tab rendering? I'm troubleshooting an issue with a third-party directive when used within the uib-tab directive from angular-bootstrap. The specific direct ...

javascriptangularjsangularjs-bootstrap