Find the nth element of an array using Javascript's map function

Recently, I took on the challenge of learning Javascript independently and came across a rather complex task.

I have an array with 18 labels and another 1D array containing all the values. Each label index corresponds to every nth element in the array.

For example, if the label index is 0, then the first and nineteenth elements belong to label 1, while the second and twentieth elements belong to the label at index 2.

I managed to create a script that constructs an Object and appends the values from the correct indices. However, I wonder if there are more efficient ways to map values between these two arrays?

var labelArrayLength = 18;

var i = 0, sampleArray = [];
while (i < 6642) {
  sampleArray.push(i);
  i++;
};

var j = 0, myObject = {};
while (j < labelArrayLength) {
  myObject[j] = {label:`dummyLabel${j}`, data:[]};
  j++
};

var stepSize = sampleArray.length / labelArrayLength;
var counter = 0;

for (var k = 0; k < stepSize; k++) {
  for (var b = 0; b < labelArrayLength; b++) {
    myObject[b]['data'].push(sampleArray[counter]);
    counter++;
  };
};

Answer №1

To efficiently obtain the index, you can utilize a single loop approach along with the remainder operator %.

var labelArrLenght = 18,
    sampleArr = [],
    myObj = {};

for (let i = 0; i < 90; i++) sampleArr.push(i);

for (let i = 0; i < labelArrLenght ; i++)
    myObj[i] = { label: `dummyLabel${i}`, data: [] };

for (var i = 0; i < sampleArr.length; i++) 
    myObj[i % labelArrLenght].data.push(sampleArr[i]);


console.log(myObj);
.as-console-wrapper { max-height: 100% !important; top: 0; }

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

Switch out bootstrap icons for angular material icons

I'm currently in the process of transitioning from using Bootstrap to Angular Material in an existing application. I need assistance with replacing the Bootstrap icons with Angular Material icons. Any help is greatly appreciated. <md-button class= ...

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

Form validation on the client side: A way to halt form submission

I have a form with several textboxes. The unobtrusive jquery validation is functioning properly and correctly turns the boxes red when invalid values are entered. However, I've noticed that when I click to submit the form, it gets posted back to the s ...

What strategies can I use to make my div content more adaptable to different screen sizes and

Currently, in my project, I have implemented a layout using the top nav menu (purple part) and the left menu (pink part) as shown in the image. However, I am facing an issue where, upon deleting some content from the view, the pink menu on the left extends ...

Performing Jasmine unit testing on a component that relies on data from a service, which itself retrieves data from another service within an Angular 2+ application

Attempting to implement unit testing for a service using httpmock has been challenging. The service in question utilizes a method to make http get calls, but I have encountered difficulties in writing the test cases. saveservice.service.ts -- file const ...

Issue with handling promise rejection of type error in node.js

Whenever I try running node server.js in Node.js, an error message pops up saying 'Cannot read property 'length' of undefined'. Despite installing all the necessary libraries (such as request) and browsing through various related posts ...

TemplateUrl malfunctioning

While experimenting with basic Angular code, I encountered an issue where everything was functioning correctly when using template, but not when switching to templateUrl. I did not provide the previous code as it was working fine except for this specific c ...

Transforming Django models into JSON format to be utilized as a JavaScript object

Looking to retrieve model data as an object in Javascript, I've been using the following approach in my Django view: var data = {{ data|safe }}; Here is how my view is set up: context = { 'data': { 'model1': serializ ...

Is the each() method in jQuery essentially a for loop?

Experimenting with adding a serialized class to a group of objects, I attempted the following approach: jQuery('#preload img').each(function(){ jQuery('#thumbs').append('<img class="index' + index + '" src="&apos ...

Heroku Node.js - Cross-Origin Resource Sharing (CORS) is functioning correctly for all API requests except for when using the image upload

Our web application contains numerous APIs that retrieve data from a Node.js server deployed on Heroku. Most of the APIs function correctly, with the exception of one that allows users to upload images to the server. While this API worked flawlessly in o ...

What could be causing my NextAuthJS discord login to function in the test environment but fail to deploy in production on NextJS 13?

After attempting to deploy my NextJS application on Vercel, I encountered a problem with the AuthJS sign-in model. While running the program using npm run dev, everything works smoothly and I can log in to my Discord account linked to the developer portal& ...

Having trouble starting the server? [Trying to launch a basic HTML application using npm install -g serve]

I am in the process of creating a PWA, but I haven't reached that stage yet. Currently, I have only created an index.html file and an empty app.js. To serve my project locally, I installed serve globally using npm install -g serve When I run the co ...

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

Error message: "The variable 'bitmap' is not defined in jQuery/CreateJS $.ajax"

I recently acquired a product designer that uses CreateJS and jQuery. Within the code, there is a function called UrlLoader which wraps an $.ajax call. function UrlLoader(params) { $.ajax({ url: url, type: 'POST' ...

Refresh the data using the Ajax function

I am attempting to implement a delete function using Ajax. function delCatItem(catitem){ var theitem = catitem; $.ajax({ url: "movie/deleteitem/", type: "POST", data: { "movieid" : catitem ...

Why is it that my website in React crashes when I type rapidly in the TextField component?

Whenever I input text quickly into the TextField in my app, it causes my website to crash and display a blank white screen. Below is the snippet of code causing the problem: TextField Code: <TextField label="Item name" ...

Converting numbers to strings based on locale in React Native

I have a quantity that, when using the amount.toFixed() function, produces the string "100.00". I would like this result to be formatted according to the specific locale. For example, in Italian the desired output is 100,00, while in English it should be ...

Setting the x-api-key header with HttpInterceptor in Angular 4: A guide

I am attempting to use HttpInterceptor to set the header key and value, but I am encountering the following error: Failed to load https://example.com/api/agency: Response to preflight request doesn't pass access control check: No 'Access ...

Arranging a string array based on numerical values

I am dealing with a string array that consists of three integer arrays, each followed by a character (either l, p, or r). My goal is to sort this string array based on the integer values. The regular Array.sort() method or Collection.sort does not provide ...

Tips for preserving the jquery inputmask after updating the DOM

It's difficult to explain, but here is a snippet showcasing the issue. (function() { var PhoneNumber = function() { this.name = ko.observable(); this.phone = ko.observable(); }; $('[data-mask="phone"]').inputmask({ mask ...