Add an array to an existing array of objects

I am working with an array of objects displayed below.

var myArray = [
{
Data:  '455',
Note: 'tre',
Id: '4'
}, 
{
Data: '456',
Note: 'bre',
Id: '5'
}, 
{
Data: '457',
Note: 'cre',
Id: '6'
}
];

In addition, I have another array called

Percent = [ '10', '20', '30'],

I need assistance in merging these two arrays to achieve the following output.

var myArray = [
{
Data:  '455',
Note: 'tre',
Id: '4',
Percent: '10'
}, 
{
Data: '456',
Note: 'bre',
Id: '5',
Percent: '20'
}, 
{
Data: '457',
Note: 'cre',
Id: '6',
Percent: '30'
}
];

Answer №1

Given that Percent and myArray have an equal number of elements, iterate through myArray and set each element's value based on the corresponding element in Percent as shown below:

myArray.forEach(function(element, index) {
  element.Percent = Percent[index];
});

Answer №2

Similar assumption as @Adam, but utilizing the ES6 arrow function functionality:

myArray.map((item, index) => item.Percentage = percentages[index]);

You can view the code in action on Plunker: link

Remember to verify browser compatibility: here

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

Issue with Wicket: unable to generate sound for resource paths

I am having some trouble with a path in my wicket project. There is a sounds folder located within the Web Pages directory. Within my JavaScript code, I am using the following path to play sounds: audioElement.setAttribute('src', 'sounds/s ...

Testing out a login form in Vue framework

Hi there! I recently put together a login form using the Vue.js framework, and now I'm looking to write some tests for my API calls. Although I'm still new to Vue.js, I'm eager to learn more about testing in this environment. Here's th ...

Error: selenium web driver java cannot locate tinyMCE

driver.switchTo().frame("tinymce_iframe"); String script="var editor=tinyMCE.get('tinymce_textarea');"; JavascriptExecutor js=(JavascriptExecutor) driver; js.executeScript(script); I'm encountering a WebDriverException while try ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

I am encountering an issue with a textarea count code. It functions perfectly on its own but when I integrate it as shown below, it stops working without throwing any errors. I have been trying to resolve this for more than 3 days now. Any assistance would ...

Separating express routes into individual files

After trying multiple solutions from Stack Overflow and various patterns for organizing routes in Node.js, I still can't seem to get it right. The endpoint either throws errors or returns a 404. Despite following suggestions from different sources lik ...

Crashing due to memory allocation issue in Sudoku grid

#include<stdio.h> #include<stdlib.h> void *allocateMemory(size_t size){ void *ptr = malloc(size); if(ptr == NULL){ printf("Not enough memory available!\n"); exit(1); } else return ptr; } int main(){ in ...

Nested loops - I'm on the brink of success, but there's a minor flaw in this code

I am currently working on a function that takes two arrays of strings as input from another function. The goal is to compare each element in the first array with every element in the second array and determine if they are equal in length. Let x represent ...

Despite using callbacks when passing props in React JS components, the rerendering still occurs

In my React project, I implemented callbacks to prevent excessive rerendering due to the large amount of data being displayed and numerous buttons that trigger these rerenderings when clicked by the user. The useCallback hooks are effective in preventing ...

The usage of event.returnValue has been phased out. It is recommended to utilize the standard event.preventDefault()

Here's the code snippet I'm working with: <script> $(document).ready(function () { $("#changeResumeStatus").click(function () { $.get("{% url 'main:changeResumeStatus' %}", function (data) { if (data[&apos ...

Tips for accessing the parent reference while binding using the .on() method

I needed to attach an event like this $("div").on("click", "li",function() { var div= $(this).parent().parent(); //this is what i'm using //..... }); above the <div> <ul> <li>1</li> <li>e2</l ...

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

"Freezing issue with Angular big table causing web page to lock up during

Looking for a way to improve the performance of an HTML table search function that is currently running very slowly and freezing the web page upon loading and searching. The table needs to be within the HTML file itself, not pulling data from a server. Any ...

Determine the quantity of elements within a JSON object based on specified criteria

I am seeking a way to count the number of items in an array of JSON objects that meet specific conditions. The structure of my array is as follows: array = [{ name: 'Bob', age: 24 }, ...., { ...

The HTTP GET request in Express.js is throwing a 500 internal server error

I have implemented a GET API call to retrieve all users from my Logins database. However, I keep encountering 500 errors when making the request. Below is the code snippet I am using: const http = axios.create({ baseURL: "http://localhost:8080/api ...

What could be causing my slideshow to loop continuously when I click the next button, but not when I click the previous button

I managed to successfully code buttons that control an auto-advancing slideshow. While both buttons are functional, only the next button is able to cycle through all images. However, when using the previous button to navigate back to the beginning, the who ...

Combining multiple AngularJS expressions to form a URL within an interpolation statement

While this explanation may be lengthy, I appreciate your patience as I try to articulate the issue at hand. The error I'm currently encountering is as follows: Error: [$interpolate:noconcat] Error while interpolating: Strict Contextual Escaping disa ...

I was able to efficiently reverse the transition using JavaScript, but I'm puzzled as to why my alternate approach is not functioning correctly

Check out my demo on jsfiddle I am trying to implement a reverse transition when clicking the <li> again. The commented code did not work, but the code below worked perfectly: let dbclickre = true; function flipped() { if (db ...

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

Issues with Gulp and Browser Sync integration

Encountering errors while running Gulp with Browser Sync in Chrome: NonESPMessageInterface --- nonEspMessageInterface.js:8 TypeError: Cannot read property 'insertBefore' of null --- angular.js:13708 Checklist message was invalid, from origin # ...