Extracting and transforming an array into a list with the desired outcome

Looking for a way to flatten the array below into a single line array using Typescript/JavaScript?

Student: any = [
  { "id": "1", "name": "Jhon", "Marks": { "Math": "90", "English": "80", "Science": "70" } },
  { "id": "2", "name": "Peter", "Marks": { "Math": "95", "English": "85", "Science": "75" } }
];

The desired output should be:

NewStudent = [
  { "id": "1", "name": "Jhon", "Math": "90", "English": "80", "Science": "70" },
  { "id": "2", "name": "Peter", "Math": "95", "English": "85", "Science": "75" }
];
javascriptangulartypescript

Answer №1

const class = [
   { "id": "1", "name": "Alice", "grades": { "Math": "85", "History": "75", "Biology": "90" } },
   { "id": "2", "name": "Bob", "grades": { "Math": "92", "History": "88", "Biology": "96" } }
];

let studentsList = [];

class.map( pupil => {
   Object.assign(pupil, pupil.grades);
   delete pupil["grades"];
   studentsList.push(pupil);
   return;
});

The studentsList array will contain the transformed data.

Answer №2

let pupils = [
    { "num": "1", "fullname": "Johnny", "Grades": { "Math": "90", "English": "80", "Science": "70" } },
    { "num": "2", "fullname": "Pete", "Grades": { "Math": "95", "English": "85", "Science": "75" } }
];
const newEntry = pupils.map(pupil => {number: pupil.num, name: pupil.fullname, ...pupil.grades})

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

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Please help me with a solution. I have developed a registration form which effectively saves users' information in a Google Sheet. However, now I am yearning to create a login form that verifies the stored data and redirects the user to a different pa ...

javascripthtmlcssformsgoogle-apps-script

Using JavaScript variables within an HTML tag

I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...

javascripthtml

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

Finding the substring enclosed by two symbols using Javascript

I'm working with a string that contains specific symbols and I need to extract the text between them. Here is an example: http://mytestdomain.com/temp-param-page-2/?wpv_paged_preload_reach=1&wpv_view_count=1&wpv_post_id=720960&wpv_post_se ...

javascriptjqueryregex

How can the Calendar Ant Design showcase events that have fluctuating dates?

Seeking a solution to display events on an Ant Design Calendar using dateCellRender with dates stored in a variable object. Here's an example of the object: [ { "id": 1, "content": "Example", & ...

reactjstypescriptantd

Preventing default behavior in a JQuery post request

Encountering an issue with jQuery functionality on a mobile device. function send() { $.post("scripts/post.php", { username: $("input[name=username]").val(), password: $("input[name=password]").val() }, function(data) { if ($(".data div" ...

javascriptjqueryhtmlpostinput

Having trouble retrieving the URL from the router in Angular 2?

Whenever I try to access the URL using console.log(_router.url), all it returns is a / (forward slash). Here is the code snippet in question: constructor( private el: ElementRef, private _auth:AuthenticationService, @Inject(AppStore) private ...

angularangular2-routing

Here's a guide on customizing the appearance of the date picker in NativeBase components for React Native by

Is there a way to show icons while using the date picker component from the Native Base UI library? ...

javascriptreactjsreact-native

Animate elements in Vue.js when navigating between pages is a great way to enhance user

I'm looking to add animation to a specific element once the route page finishes loading. This is not related to route page transitions. I've experimented with various methods, trying to animate a progress bar based on dynamic data values. I attem ...

javascriptcssvue.jsfrontendvuejs2

Reactjs rendering problem related to webpack

Greetings! I am new to using react js and decided to create a quiz application. However, I encountered an error when the render function was called. Below is my webpack.config file: module.exports = { entry: { app: './src/index.js' }, ...

javascriptreactjscomponentswebpack

Communication between child and parent components in Vue.js is an essential feature

Attempting to invoke functions from my component to Vue for the login process. This is the code snippet of my component : Vue.component('auths', { data: function() { return { ip: '', sessiontoken: '' } ...

javascriptvue.jsvue-component

Real-time data feeds straight from JSON

Currently, I have a JSON file that is generated dynamically and it contains match information along with a unique id. This JSON data is categorized into live, upcoming, and recent arrays. Being new to Javascript, I am unsure about the best approach to crea ...

javascriptjqueryhtmljson

Click the link to find the JSON node that corresponds to the onclick event

After parsing JSON, the JS code below is returning a list of movie titles for me. Each movie title node contains additional attributes and values that are not currently being displayed. My goal is to have the other values in that specific node displayed wh ...

javascriptjqueryjsonjquery-mobilejsonp

Model updating with the addition of an item and triggering a secondary ng-repeat for refreshing

As I was working on the phone tutorial, I found myself pondering how to implement a specific use case. The browser renders a list of phones. When the user clicks on add phone for one of these phones, the function addItem is triggered and adds that phone ...

javascriptangularjsangularjs-ng-repeat

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

javascriptjqueryhtmlangularjs

A step-by-step guide on incorporating a .env file into a React JS project that is written with TypeScript

I'm currently working on a React JS project with TypeScript. I know that we can utilize a .env file to define some configurations, like so: .env file REACT_APP_SOME_CONFIGURATION = "some value" We can then use these configurations in our c ...

node.jsreactjstypescript

Managing the position of the caret within a content-editable div

I need help with editing a contenteditable div in HTML <div contenteditable="true" id="TextOnlyPage"></div> Here is my jQuery code: var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm"); $('#TextOnlyPage').keyup(function( ...

javascriptjqueryangularjscaret

Jest tests reveal potential errors indicating an object may be null

When running my Jest (typescript) test cases on mongoose Models, I encounter numerous errors such as: Error TS2531: Object is possibly 'null'. For example, consider the following code snippet where the error is reported on line 3: const user = ...

node.jstypescriptmongoosejestjs

Is there a way to refresh the animation on dougtesting.net?

I'm working with the dougtesting.net library to create a spinning wheel. I've been trying to figure out how to reset the animation once it finishes, but I can't seem to find any information on it. My goal is to completely clear all states so ...

javascripthtmljquerycssvue.js