Trading keys between arrays in JavaScript

I have a set of simple objects contained within an array:

var myObject1 = [
   {name: "value1", adddress: "545454545445"},
   {name: "value2", adddress: "323233223"},
   {name: "value3", adddress: "33232"}
];

My goal is to transform the keys of each object using values from another array:

const myObject = [
   ['aa', 'name'],
   ['bb', 'address']
];

What would be the approach to achieve the desired outcome?

[
   { aa: 'value1', bb: '54545455454' },
   { aa: 'value2', bb: '3232323233' },
   { aa: 'value3', bb: '33232' }
]
javascriptarrays

Answer №1

If you want to change the keys of an object, you can utilize Array.map.

const sampleObject = [
  { label: "value1", id: "545454545445" },
  { label: "value2", id: "323233223" },
  { label: "value3", id: "33232" },
];

const transformedObject = sampleObject.map((element) => {
  return {
    aa: element.label,
    bb: element.id,
  };
});

// [
//   { aa: 'value1', bb: '545454545445' },
//   { aa: 'value2', bb: '323233223' },
//   { aa: 'value3', bb: '33232' },
// ]

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

AngularJS: dependent dropdown menus

Attempting to create a cascade dropdown in Angular, I assumed it would work seamlessly with binding. Here is the code snippet: <select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" req ...

javascriptangularjs

What is the best way to deliver an HTTP request from the controller to my Ajax function?

Is there a way to send HTTP OK and error responses from the controller to my AJAX request? For example, using HttpStatusCode.OK and HttpStatusCode.BadRequest. When I inspect in my browser it shows impresion.js 304 not modified. $(document).ready(functi ...

javascriptajaxhttpasp.net-mvc-5

Is there a way to access the body html element within a template in vue.js?

I'm struggling to add styles to the body element of my HTML page. It seems like I can't access it directly from the template because there's another body element nested inside the main body. Even when I try to change the style using JavaScri ...

javascripthtmlvue.js

Error in NodeJS: 'Cannot alter headers once they have been sent.'

My project involves developing an app with Express that fetches tweets from Twitter. Each API call retrieves 200 tweets (or fewer if there are less than 200) and in total, I need to retrieve 1800 tweets. To achieve this, I use a time interval to make multi ...

javascriptnode.jsexpress

What is the approach for capturing system or website sound using JavaScript?

After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and ...

javascripthtmljquerycssaudio-recording

Is it possible for the UUIDs generated by the uuid package to be identical?

I am in need of creating unique UIDs for objects that will be stored in a database. To achieve this, I am utilizing the UUID npm package for generating unique identifiers. I have concerns regarding the possibility of duplicate IDs being generated by this p ...

javascriptnode.jsexpressnpm

Executing a JavaScript function when an element is clicked using inline

Is it possible to write the code below in a single line? <a href="#" onClick="function(){ //do something; return false;};return false;"></a> As an alternative to: <a href="#" onClick="doSomething(); return false;"></a> functio ...

javascriptonclick

What are the steps to incorporate a MenuItem within a div container instead of being a direct child of the Select component in Material-UI?

Embarking on my MUI journey, I am exploring how to utilize Select and MenuItem in tandem to create a checked dropdown functionality with the help of this reference link. My goal is to structure a header, body div for MenuItems, and a footer inside the sele ...

javascriptreactjsmaterial-ui

Exploring the depths of npm in the realm of frontend development

Currently, I am delving into the realm of Javascript/Node development through self-teaching. While I grasp the concept of npm handling package installations for my Node application on the server side, I am struggling to comprehend how npm assists me with ...

javascriptnode.jsnpm

Implementing Ajax Js to search within a specific div - reducing text overload on the page

Our e-shop on Prestashop requires an Ajax search feature to find compatible batteries and adapters on the page. Here is the code I have created: https://jsfiddle.net/fgfjo2n9/ I am facing two issues: • 1st I want the output to only display the heading ...

javascriptjqueryhtmlajaxsearch

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

I am attempting to pass different data to my other component. Essentially, when my variable firstvalue is not null, I want to send firstvalue. Currently, this setup is functioning as expected. However, I now wish to send secondvalue if it is not null. < ...

javascripthtmlvue.js

What could be causing the $httpProvider.interceptors to unexpectedly return an 'undefined' value?

Having some trouble parsing the response of my basic AngularJS app that consumes Yelp's API using $httpProvider.interceptors. This is the structure of my app: var app = angular.module("restaurantList", []); The yelpAPI service handles authenticatio ...

javascriptangularjsapiangular-httpangular-http-interceptors

The sorting icon cannot be substituted with jQuery, AJAX, or PHP

Currently, I am working on implementing "sort tables" using ajax, jquery, and PHP. The sorting function is functioning correctly; however, I need to show/hide the "sorting images". At the moment, only one-sided (descending) sorting is operational because I ...

javascriptphphtmljqueryajax

How to dynamically adjust font size using Javascript

Is there a way to adjust the font size of the left-column using JavaScript? <div id="left-column"> <a href="">1</a><br> <a href="">2</a><br> <a href="">3</a><br> <a href=""> ...

javascripthtmlcss

Error message consistently pops up when using the jQuery search feature

My jQuery function is fetching data from a different domain, and I want to use AJAX to display that data when the user enters a value into the search box. However, no matter if I search by .productName or .itemCode, the app always gives me an error messa ...

javascriptjqueryarraysjsonsearch

What is the method for activating a button when a user inputs the correct email address or a 10-digit mobile number

How can I enable a button when the user enters a correct email or a 10-digit mobile number? Here is my code: https://stackblitz.com/edit/angular-p5knn6?file=src%2Findex.html <div class="login_div"> <form action=""> <input type="text" ...

javascriptangular

MongoDB is able to retrieve a nested array of objects with a certain property removed from each object. It should be noted that .then() does not function with aggregation

I am a newcomer to mongodb and struggling to find a solution for my specific use case. Here is an example document I am working with: { _id : ObjectId('5rtgwr6gsrtbsr6hsfbsr6bdrfyb'), uuid : 'something', mainArray : [ ...

node.jsarraysmongodbnestedslice

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

retrieve information using Python in JavaScript

I am in the process of developing a website using Python, Javascript (JQuery), and AJAX. While I know how to initiate a Python script with Ajax, I am unsure of how to send data back to Javascript from Python. For instance, if there is an error in a form s ...

javascriptpythonajaxalert

What is the method for developing a Typescript-connected High-Order React Component with Redux?

I am looking to develop a React Higher-Order Component that can safeguard routes within my application from unauthorized users without an access token. I aim to use this HOC to wrap a Component like so in the parent component: <Route exact path ...

javascriptreactjstypescriptreduxreact-router