Struggling to understand this concept, imagine we have an array containing:
["apple", "banana", "pear", "kiwi", "orange"]
I want to transform this array into:
["apple", "apple/banana", "apple/banana/pear", "apple/banana/pear/kiwi", "apple/banana/pear/kiwi/orange"]
I am looking to achieve this in JavaScript using ES5 and unsure of how to proceed.
Below is a straightforward example of how to achieve what you're attempting:
Using ES5
var input = ["apple", "banana", "pear", "kiwi", "orange"];
var prev = '';
var output = input.map(function (el) {
el = prev + el; prev = el + '/'; return el;
});
console.log(output);
With ES6 Syntax
let input = ["apple", "banana", "pear", "kiwi", "orange"];
let prev= '';
let output = input.map( el => { el = prev + el; prev = el+'/'; return el})
console.log(output)
Array.map() is the perfect solution for scenarios like this.
The
map()function generates a new array by applying a specified function to each element in the original array.
When using map on an array, you can incorporate join() and slice() to merge specific values from the initial array.
let input = ["apple", "banana", "pear", "kiwi", "orange"];
let output = input.map((el, index) => {
return (input[index-1]) ? input.slice(0, index+1).join('/') : el;
})
output:
Array [ "apple", "apple/banana", "apple/banana/pear", "apple/banana/pear/kiwi", "apple/banana/pear/kiwi/orange" ]
Further explanation of the logic behind those 3 lines:
// breaking it down.
let output = input.map((el, index) => {
// Check if there is a previous index in this array, then merge it with the current one
if (input[index-1]) {
// all the previous elements including the current one
let a = input.slice(0, index+1)
// join them together with a separator
let b = a.join('/');
return b;
} else {
// if not, just return the element itself
return el;
}
})
You mentioned: Just a heads up, I am currently focusing on ES5.
Regrettably, there seems to be confusion for some individuals about what ES5 entails, leading them to suggest solutions in ES6 (featuring arrow function expressions, let statements, and constants).
Array.map was introduced in the ECMA-262 standard with the ECMAScript 5.1 edition and is fully compatible with all modern browsers, including IE9.
var input = ["apple", "banana", "pear", "kiwi", "orange"],
output = input.map(function(elem, index)
{
return index > 0 ? input.slice(0, index + 1).join('/') : elem;
});
console.log(JSON.stringify(output, null, '\t'));let fruits = ["apple", "pear", "orange", "banana"];
let index;
for( index=0; index<fruits.length; index++) {
if (index == 0){
continue;
}
let tempFruit = fruits[index];
fruits[index] = fruits[index-1] + "/" + tempFruit;
}
for( index=0; index<fruits.length; index++) {
print(fruits[index]);
}
Here's the revised code snippet for you!
Key points to keep in mind:
Here is a JavaScript code snippet that creates a new array by combining each element with the previous one:
var array = ["apple", "banana", "pear", "kiwi", "orange"]
var all = [];
var str ="";
for(var i=0;i< array.length;i++)
{
if(array[i-1]){
str += array[i-1]+'/';
all.push(str+array[i])
}
else all.push(array[i])
}
console.log(all);The functionality behind this method involves the creation of a new array. It then takes the last string in the array, appends a '/' followed by the next string, and repeats the process for each element.
yourArray.reduce((newArray, current) => newArray.concat(newArray.length > 0 ? newArray[newArray.length - 1] + '/' + current : current), [])
// Expanded version:
yourArray.reduce((newArray, current) => {
if (newArray.length > 0) {
return newArray.concat(current)
} else {
const previousString = newArray[newArray.length - 1]
return newArray.concat(previousString + '/' + current)
}
}, [])
For those who utilize ES6 or are able to transpile their code into ES5 (such as using Babel)
const b = ["x", "y", "z"];
const result = b.map((_, j) => b.slice(0, j+1).join("-"));
console.log(result);Within my application, I have two pages - page A and page B, each with its own model. Both pages are loaded by the HomeController as shown below. public class ModelA { public string UserName { get; set; } public int UserID { get; set; } } public ...
In the input field available to users, they can enter multiple inputs separated by commas. <div class="container"> Enter your values:<input type="text" multiple #inputCheck> <input type="submit"(cli ...
I'm currently developing an ASP.NET Core MVC application and have a registration page set up. My goal is to return View with errors if the model state is false: @model WebApplication2PROP.Entities.UserRegister @* For more information on enabling M ...
As a seasoned Java programmer, I find myself in unfamiliar territory with a project my boss assigned me. Following a discussion with an engineer from the client company, I'm tasked with creating a responsive iframe using pym.js. The issue? I have no p ...
I am trying to add a single particle to my scene and have the ability to move it around. However, my attempts to do so without using a Particle System have been unsuccessful. Whenever I try to render the particle as a mesh, nothing appears on the screen. I ...
Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...
I've been using C# for quite some time, but I'm facing a challenge with a basic concept in the JavaScript part of my project. The following code snippet is part of a larger function I've written: addPaymentsToBreakdown = function () { f ...
I've been working on creating a dropdown for Date of Birth using ng-options. I've managed to set it up for day and month, but I'm encountering an issue with the year dropdown. The problem is that the years are displayed in reverse order, sta ...
Currently, I am utilizing this approach to decode the token and retrieve its expiration date. Here is the code snippet: var decode = Msal.IdToken(localStorage["msal.idtoken"]); This method is chosen to prevent the need for adding an additional jwtdecode ...
To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...
Apologies for the title, I couldn't think of a better way to explain my issue. I have a list-group and I want the buttons to display a specific color when active. However, it seems that the embedded spans are capturing the click event and not registe ...
Recently, I've been experimenting with two methods to reverse an array. Firstly, I tried using the push method to create a new array. Secondly, I attempted using destructuring to mutate the original array. I'm curious about which of these techni ...
Here is the HTML code I am working with: <div id="container"> <video id="video" src="video.ogv" loop></video> </div> The "container" div and video element occupy the entire screen. #container { po ...
I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object. Here is my HTML : <a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav" ...
When I try to implement form handling on the startpage, an error is displayed by the system. Here is the code using Express: var http = require('http'), express = require('express'), app = express(); app.use(express.bodyParser()); ...
Currently, I am utilizing a slider component known as Hooper. It's all functioning smoothly - of course, I've created a separate component for it because I prefer not to have it included in my global app at all times. <template> <hoo ...
Anyone familiar with how to achieve a page turner effect for PDF files using Angular? I'm open to jQuery solutions as well. I've come across turn.js, which uses HTML, but I'm specifically looking for a way to implement this effect with PDF f ...
There are 4 divs that move at different, random speeds each time. I am trying to determine which one is the fastest or reaches the goal first. Additionally, there is a betting box where you can choose a horse to bet on. I need to compare the winner with my ...
When a user performs a search, I pass the search term as a string to direct them to a new page. How can I create a valid URL (e.g., remove spaces from the string)? It's crucial that the next page can recognize where any spaces were in the search word ...
I have a list of groups with names. <ul id="groups" > <li id="group1" ></li> <li id="group2" ></li> <li id="group3"></li> </ul> Additionally, I have sliding containers. <div id="containers" > ...