I've got an array of strings that I need to display as a comma-separated list, with "and" added before the last element. Here's what I have:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const energy = fruits.join(', ').replace(/,(?=[^,]*$)/,' and');
This code will output:
'Banana, Orange, Apple and Mango'
Is there any way to modify this so it adds "and" just before the last word in the list?
To create a custom logic, try using the Array.reduce function in JavaScript instead. Here's an example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.reduce(function (previousValue, currentValue, currentIndex) {
return previousValue + (currentIndex === fruits.length - 1 ? ' and ' : ', ') + currentValue;
});
To combine the first 3 items in the array, you can use slice and join methods, then add the last item with 'and'.
const colors = ["Red", "Blue", "Green", "Yellow"];
let combination = colors.slice(0, colors.length - 1).join(', ');
combination += ' and ' + colors[colors.length - 1];
It is not possible to pass a function to the .join method, so you have to manually iterate through the loop and join the elements yourself:
const fruits = ['banana', 'apple', 'taco']
let result = fruits[0]
for (let i = 1; i < fruits.length; i++) {
if (i < fruits.length - 1) {
result += ', ' + fruits[i]
} else {
result += ' and ' + fruits[i]
}
}
console.log(result)You might consider creating a custom function for this purpose:
// Custom join function generator.
function customJoin(fn) {
return function(array) {
let result = array[0]
for (let i = 1; i < array.length; i++) {
const delimiter = fn(array[i - 1], array[i], i, array)
result += delimiter + array[i]
}
return result
}
}
const commaOrAndJoin = customJoin(function(a, b, i, arr) {
return (i === arr.length - 1) ? ' and ' : ', '
})
console.log(commaOrAndJoin(['bread', 'fish', 'butter']))If you're looking for a simple solution to convert an array into a sentence, the toSentence function from underscore.string is perfect. You don't have to include the entire library; just use the code snippet below:
function toSentence(array, separator, lastSeparator, serial) {
separator = separator || ', ';
lastSeparator = lastSeparator || ' and ';
var newArray = array.slice(),
lastItem = newArray.pop();
if (array.length > 2 && serial) lastSeparator = separator + lastSeparator;
return newArray.length ? newArray.join(separator) + lastSeparator + lastItem : lastItem;
};
One way to achieve this is by following these steps:
let separator = ', ';
let vegetables = ["Carrot", "Broccoli", "Spinach", "Celery"];
let mix = vegetables.join(separator);
let position = mix.lastIndexOf(separator);
mix = mix.substring(0, position) + ' and ' + mix.substring(position + separator.length);
console.log(mix);Currently, I am developing an Angular application that utilizes PrimeNG. In the process, I encountered a challenge. Initially, I had a component with a PrimeNG Dialog embedded within (refer to this link), and it was functioning properly. To streamline my ...
I have decided to use UserVoice for a free user voting service due to their API, allowing me to create a custom UI, which is essential for my needs. However, it seems that users are unable to upload images along with their suggestions, only text. It is i ...
I am facing a situation where I have multiple arrays in my Laravel view that need to be passed into the controller. These arrays are not meant to be altered by the user and are simply being transmitted from another controller method through the view acting ...
Currently, I am working with Selenium WebDriver using Java. Log.info("Clicking on To weekrange dropdown"); JavascriptExecutor executor25 = (JavascriptExecutor)driver; executor25.executeScript("document.getElementById('toWeekYear).style.display=' ...
Recently, I've embarked on a journey to learn javascript and ventured into developing a small chrome extension. This extension aims to scan item listings on a specific website for products that match keywords provided by users. I am seeking guidance o ...
Recently delving into reactjs, I stumbled upon a situation in the code where the route alerts messages twice. I'm seeking advice on how to prevent this issue, please disregard the redux code involved. Any suggestions? Index.js import React from &apos ...
Attempting to implement a dynamic searchbar with various parameters has led me to explore using jQuery to load and clone the searchbar file in order to append it to the body dynamically. I have made several attempts to modify selectors without achieving t ...
I am currently facing a challenge with my directive. In the snippet below, I am attempting to extract content from a template, append it to the layout, and then compile it: var $template = angular.element("<div></div>"); $template.append($co ...
I would like to personalize the agSetColumnFilter and incorporate the agNumberColumnFilter feature into it. What steps should I take to make this happen? ...
Currently, I am running some tests and encountering issues with this code. Can anyone spot what's wrong? function IATetris(Pieza, Rotacion, Array) io.write("The table the script received has: ", Pieza, "\n") RotacionInicial = Rotacion PosInicial ...
Is there a simple method to determine if an HTML element possesses a particular class? For instance: var item = document.getElementById('something'); if (item.classList.contains('car')) Remember, an element can have more than one clas ...
Hey there! I've been working on using this code snippet in my defult.js file to call an API, but I'm having trouble figuring out how to read the output. It always seems to end up in the last else part. function fetchDataDist(APPID, flag, call ...
I am currently utilizing this plugin in my application: https://github.com/EddyVerbruggen/nativescript-plugin-firebase Unfortunately, when using my real device on a 3G network, I encounter the following error: auth/network-request-failed Thrown if a netw ...
I am currently working with an array and have successfully displayed it on the screen. My inquiry is whether it is feasible to insert a line break for each of the data points it presents. { name: "cartItems", label: "Product Name ...
Curious about the potential for creating dynamic asset tags within Angular and, if so, the method to achieve this. Here's the backstory: I've been utilizing Mixture.io for templating and have become accustomed to its seamless and adaptable natur ...
for (int i = 0; i < a.length; i++) { for (int j = i; j < a.length; j++) { if (a[j] % 2 == 0 && i % 2 == 0 || a[j] % 2 == 1 && i % 2 == 1) This code snippet demonstrates a nested loop that checks for even and o ...
My application is an Electron app developed with Vue.js, and I am looking to create both a production build and a development build. My goal is to utilize the NODE_ENV environment variable to adjust the behavior of the application once it is packaged. Th ...
I am in the process of developing a web application that utilizes a mobile phone as a controller, similar to this example: . The concept is quite simple - I just need to transfer text entered on the phone to the computer. There is no need for a database, ...
Within a PHP file, there is a form tag containing multiple inputs of type submit (essentially buttons) generated automatically by an external PHP script with names like button0, button1, etc. My goal is to utilize AJAX and jQuery to send the value of the c ...
I have recently set up a React project and now I'm attempting to integrate MobX into it. This requires using decorators such as: @observable However, when I try to implement this, I encounter the following error: https://github.com/mobxjs/mobx Mod ...