Here is the initial array structure:
[
{
foo:{
name: 'One',
value: 10
},
bar: {
name: 'Two',
value: 20
}
}
]
The desired array structure is:
[
{
name: 'One',
value: 10
},
{
name: 'Two',
value: 20
}
]
Is it possible to achieve this transformation using a map function, or should another method be used?
To achieve the desired outcome, you can utilize Object.values() in combination with Array.flatMap():
let array = [
{
foo:{
name: 'One',
value: 10
},
bar: {
name: 'Two',
value: 20
}
}
]
let result = array.flatMap(object => Object.values(object));
console.log('Result:', result).as-console-wrapper { max-height: 100% !important; top: 0; }The flatMap function may not be compatible with all versions of JavaScript, you can verify this by visiting this link
If your version does not support flatMap, you can use other array methods as demonstrated in the following example:
function transformArray(arr) {
let result = [];
arr.forEach(obj => {
const entries = Object.entries(obj);
result.push(...entries.map(entry => entry[1]));
});
return result;
}
To see this example in action, visit this JSFiddle Playground
UPDATE: I noticed that there has been a correction made to the original post, rendering this answer no longer relevant. The array structure you intended to define seems to have changed. I will keep my original response for educational purposes, but I recommend checking out @terry-lennox's answer here
The initial array format you provided is incorrect as it implies both elements have the following structure:
foo: {
name: 'One',
value: 10
}
This format is not valid. It appears you intended for each element to be an object itself, like so:
{
foo: {
name: 'One',
value: 10
}
}
Therefore, the revised array would look like this:
[{
foo: {
name: 'One',
value: 10
}
}, {
bar: {
name: 'Two',
value: 20
}
}]
With this fixed structure, your objective is to extract the object associated with the first key in every element of the array. This can be achieved by:
yourArray.map(item => item[Object.keys(item)[0]]);
The map() function will generate a new array by executing the specified function for each element in yourArray. The function within map() simply returns the value of the first key for each item.
In order to extract the value part of objects nested within arrays returned by the map function, we can utilize Objects.values(). Once we have isolated the values, we can then flatten the resulting nested array to achieve our desired outcome.
let data = [
{
foo: {
name: 'One',
value: 10
},
bar: {
name: 'Two',
value: 20
}
}
];
console.log(
Object.values(data).map(i => {
return Object.values(i);
}).flat()
);I have been developing a feature for my website that automatically logs users out after a certain period of time. Within this functionality, I have incorporated the window.location.reload(true) method in three different sections of my code. Two of these in ...
I currently have an object that resembles the following: const obj = { id: 1, name: { "english-us": "John", "english-uk": "John", "italian-eu": "Giovanni", }, }; My goal is to c ...
Using the following code, you can load a Google map from an inline div to a Colorbox popup window in all modern browsers. However, it may not work with outdated browsers like IE7. <head> <script src="http://maps.googleapis.com/maps/api/js?key=/// ...
Is running multiple requests in a postman script feasible? I have an endpoint: http://localhost/gadgets/{id}/buy This endpoint sets a flag in a gadget object/entry based on its id. With hundreds of gadgets, can I use a shared file of ids to create and run ...
Can someone help me with setting/docking a div element above another div? The div contains some other divs and form objects, serving as an inputbox dialog that should appear right above an element when clicked. I have set the onClick() event for a Click &l ...
I have a specific issue with my Select component, which is essentially a dropdown menu. The problem arises when I select an item from the dropdown - the id does not immediately change and instead remains as the id of the previously selected item. However, ...
Encountering an error while attempting to remove a Child object Error Message: TypeError: ctrl.otsact.tests.splice is not a function HTML : <tr ng-repeat="act in ctrl.otsact.tests" ng-if="ctrl.editToggle"> <td><span ng-click="ctrl.r ...
Consider the following scenario with two arrays: $firstArray = ['ASD', 'Ep', 'Com']; $secondArray = [1=>'ASD', 2=>'bob', 3=>'Ep', 4=>'Jam', 5=>'Com']; The goal ...
When working with a three.js rendering, I have a small texture that I need to repeat multiple times. This texture includes various maps such as the map itself, a displacement map, a normal map, an ambient occlusion map, and a specular map. Everything looks ...
My current setup involves a custom Yeoman generator for specific applications, which comes with its own set of dependencies and configurations. - GruntJS must be installed globally; - Bower must be installed globally; - Yeoman must be installed globally ...
Currently, I am facing a challenge with an array that needs to be split into two separate arrays. One array should only hold prices, while the other should only contain descriptions. Here is an example: var startingArray = ["apple", "30.00", "pizza", "2. ...
I've run into an issue with a "load more button". Each time I perform a new search, I want to display the second page of results and subsequent pages. However, the value I'm using to determine the current page keeps increasing continuously. I nee ...
What is the best way to enhance the readability of my code by replacing the extensive use of if and else if statements when detecting different file extensions? Currently, I have over 30 else ifs in my actual code which makes it look cluttered. // Retrie ...
I am currently working on a logic to eliminate any elements within a div element. I attempted to replace the element using the following code: (div.html().replace(/^\s* /m, '')); However, the issue I am facing is that ...
Is there a way to allow users to save their dashboard layout preferences in the database? Take a look at the image below and share your suggestions. Thank you! **index.php** <script type="text/javascript"> $(document).ready(fun ...
I've been grappling with this issue for some time now. It's puzzling because I'm confident the JS code is correct. There must be something missing, considering I've tested it on both Chrome and Mozilla. I've organized the files in ...
In my current project, I am working on an application that focuses on providing information about different geological locations. To develop this app, I am utilizing the Ionic framework in conjunction with PhoneGap. At the moment, I have structured the da ...
I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...
While analyzing the React source code, I encountered a peculiar requirement involving the use of var emptyFunction = require('fbjs/lib/emptyFunction');. The function in question left me puzzled. Here is how it looks: function makeEmptyFunction ...
I'm encountering a strange issue with my Cordova Android project (AngularJS + Ionic). When I run the project in Android Studio, I receive an error on my JS file that says: Uncaught SyntaxError: Unexpected token {, http://192.168.43.211:8100/templates ...