Seeking methods to transform a data structure from:
data = {
0:{A:a},
1:{B:b},
2:{C:c},
}
to a format like this:
[
{0:{A:a}},
{1:{B:b}},
{2:{C:c}},
]
Trying the spread operator [...data] results in an empty array.
Experimented with [{...data}]
Is there a way to achieve the desired outcome using the spread operator? And why does the attempted approach not succeed?
"Is it possible to achieve the desired outcome using the spread operator?" In short, no. (see below for an alternative approach)
"Why does this method not yield the desired result?"
This method falls short because as specified in the MDN documentation
"The Rest/Spread Properties for ECMAScript proposal (stage 3) introduces spread properties within object literals. It copies own enumerable properties from a provided object onto a new object."
As indicated in the documentation, according to the "Rest/Spread Properties proposal", spreading object properties onto an array is not feasible; objects will only spread their properties onto another object. Similarly, arrays cannot spread onto an object, but instead, they will spread onto a new array.
Alternate method:
You can accomplish this task quite easily using Object.keys().map(). Utilizing Object.keys() retrieves an array of the object's keys, and employing Array.map() allows you to map them into an array with the preferred structure, like the example below:
var data = {
0:{A:"a"},
1:{B:"b"},
2:{C:"c"},
}
var result = Object.keys(data).map(function (key) {
return { [key]: data[key] };
});
console.log(result);If you utilize Object.entries function, you can retrieve [key, value] pairs and transform them into an array of objects by employing computed property names:
const data = {
0:{A: 'a'},
1:{B: 'b'},
2:{C: 'c'}
};
const result = Object.entries(data).map(([key, value]) => ({ [key]: value }));
console.log(result);It's not possible to use the spread operator in the way you attempted, but you can achieve the desired result using the reduce method.
info = {
0:{X:'x'},
1:{Y:'y'},
2:{Z:'z'},
}
let finalArr = Object.keys(info).reduce((array, element) => {
array.push({[element]: info[element]});
return array;
}, []);
console.log(finalArr);const elements = ['Lively lion', 'Cheeky chimp', 'Playful panda']
const copiedElements = [...elements]
console.log(copiedElements)
Situation with HTML <div id="form-lightbox"> <div class="form"> <div id="ajaxreplace"> <script type="text/javascript"> jQuery(function() { jQuery.ajaxReplace({ //parame ...
Here is the given code snippet: public noArtistBeingEdited(): boolean { if (this.isFirstNameBeingEdited()) { return false; } if (this.isLastNameBeingEditable()) { return false; } return true; } What are some ways to ma ...
Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...
I have been working on a project for my coding class, specifically focusing on C#. I have a seemingly simple question that has left me puzzled as I cannot seem to find an answer anywhere. While searching, all I keep finding are results on how to create a l ...
Is there a way to combine multiple variables into one variable in order to streamline code usage? How can I set it up so that I can utilize $scope.bundle instead of using $scope.acc.city, $scope.acc.state, and $scope.acc.country individually? I'm look ...
Recently, I entered the world of backend development and came across this JS code utilizing express: const express = require('express'); const app = express(); const port = process.env.PORT || '3000'; app.listen(port, ()=> console.lo ...
I've been working on a website that features a jumbotron with images that transition. I've searched online for solutions, but have come up empty. I know the answer is probably simple, but I just can't seem to figure it out right now. The is ...
Currently experimenting with the latest version of q.js to integrate promises into my ajax calls without utilizing node.js at all. I retrieved the most recent version from https://github.com/kriskowal/q and only included q.js in my project. While testing, ...
Attempting to implement bootstrap tooltips on bootstrap icons with the following code: <body> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') ...
I am currently facing an issue with the uploadImage API in my frontend. I am using input[type='file'] to obtain image data from users and then POSTing it to my API. In the backend, I am parsing this data using formidable. However, the problem ari ...
In the context of a state reducer presented as follows: const anObject = { fruit: 'Apple', today: new Date(), } function reducer(state, stateReducer) { return stateReducer(state); } const fruit = reducer(anObject, state => state.fruit ...
I'm currently working on sending the req.body from a POST request route back to the executing function for further processing. The structure of req.body is as follows: { username: 'aa', password: 'ss' } After making the post requ ...
After struggling with the AWS JS SDK V3 documentation and examples, I decided to share my findings to help others. The official SDK docs were frustrating and misleading, especially when it came to showing marshaled output properly. While the DDB Doc client ...
I have a gltf file stored in firebase storage along with its textures. I am trying to load this object into my view using THREE js. Initially, I attempted to get the download URL of the gltf file and pass it to GLTFLoader. However, the model did not load ...
I am utilizing Material UI for creating a website. I have appended a list with data and added a popup on a button. However, the popup only works on the first button click. I aim to generate a new popup every time the button is clicked. Additionally, there ...
When I make an axios call, I receive an object which I pass to a child component. However, when I attempt to loop through the object in the child component to access a property of another nested object, I encounter an issue where the property is showing as ...
I am currently working on incorporating an array read feature using Vue.js: {{ this.locations[this.record.carton.LocationID - 1].Location }} Although the code functions properly during runtime, it throws an error upon initial loading: app.js:55125 [Vue wa ...
I have encountered an issue with my code on Internet Explorer. It works perfectly on Firefox, but when the content of the div is too high in IE, it fails to scroll to the bottom. Clicking a button to scroll to the bottom works fine, but the problem arise ...
This question pertains to an intricate aspect of React, specifically focusing on state encapsulation. The example provided in this response to the query mentioned in this post illustrates how React props that are objects are passed by reference: const ...
Trying to extract the employee's name from march.html which has an ID like: <h3 id="name">John Doe</h3> I want to retrieve this name and display it in my index.php. This is for an 'Employee of the Month' feature where I need to ...