Converting objects into lists in Typescript: A step-by-step guide

I need help converting my object to a list before passing it as a parameter to my API. I have tried using Object.keys but the output is not as expected.

Object.keys(myobj).map(function(key){
---logic
});

The API returns a list of objects like this:

[{Name : "sachin",Age  : 30},{Name : "Ramesh",Age  : 35}]

When I use the find method in Angular, the object from the list looks like this:

 {Name : "sachin",Age  : 30}

Now I need to change the Age property value to 42 and convert it back to a list before passing it to the API.

[{Name : "sachin",Age  : 42}]

If anyone can assist me in achieving this result, it would be greatly appreciated.

Answer №1

Here is a suggestion for achieving the desired outcome:

let data = [{...originalData,...{
  Name: 'John Doe'
}}];

originalData refers to the initial data fetched using a fetch request.

In essence, the use of the spread operator (...) combines the properties of both objects into one.

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

descend bubble events bespoke

When dealing with events, they typically only bubble up. However, there may be a situation where a custom event needs to be triggered on a parent element and activate all the handlers on its children if they have a listener attached. How can this be achi ...

Exploring the Isolated Scope and Attributes in AngularJS Directives

To view an example, please visit this link foodMeApp.directive('fmRating', function() { return { restrict: 'E', scope: { symbol: '@', max: '@', readonly: '@' }, require: ...

Transform the provided timestamp into a format compatible with InfluxDB timestamp requirements

My Incoming Date is in the following format : 15.08.2017 23:03:23.120000 Currently, I am utilizing the Node-Red Platform to convert msg.payload.time into an Influx timestamp. However, I am encountering the following error: "Error: Expected a numeric valu ...

Verify whether any of the list items do not contain a specified class

I'm struggling with a scenario where I need to check if any of the list items in a ul element do not have a certain class. Here's an example: <ul class="list-synthese"> <li class="hidden">Lorem</li> <li class="hidden" ...

Utilize static members of an imported type within an Aurelia view

Currently, I am utilizing Aurelia in combination with TypeScript. In my code, I have defined a simple type with static variables as shown below: export class MyModule { static foo = false; } Furthermore, I have created an Aurelia view model as follo ...

Unlock the encrypted information in the blockchain

I've been working on encrypting and decrypting values using Node's built-in crypto module. I found a helpful tutorial that showed me how to encrypt the data, but it didn't provide any sample code for decryption. When I tried using code from ...

Utilize React JS to serialize form data for submission via a POST request

I have a simple form where users input text and it triggers an AJAX request to create a new comment. var CommentForm = React.createClass({ propTypes: { // ... // ... }, handleFormSubmit: function(e) { e.preventDefault(); var compo ...

What is the reason for the successful compilation of "require" and the failure of "import"?

Currently getting familiar with TypeScript/JavaScript, as well as Node.js, I am in the process of creating a basic script to run via command line. After adding the dependency archiver and inserting import archiver from 'archiver';to my script, I ...

Having difficulties with the 'client request' function in the latest version of Next.js (13.5.1) - still receiving server-side responses

In the current version of Next.js (13.5.3), I am utilizing 'use client' but the component is still rendering from the server-side. Additionally, I am finding it challenging to integrate Tailwind and Ant Design (antd) together in Next.js. If anyo ...

Issues with dynamic head tags not being reflected in Next.js

Despite my efforts, the Next.js next/link head tag and next-seo OGP are not being reflected on my website. I've spent over 5 hours trying to troubleshoot this issue without success. The only tag that seems to be working is the one in the Head of _doc ...

Adding jQuery and other libraries to Typescript for optimal functionality

After spending days researching and struggling, I am reaching out here for clarification on the process of importing a library in Typescript. I used to just add the script tag and everything would work fine. Now that I am working on building a MEAN-Stack ...

"Steps to retrieve the button's ID when using the onClick event in Reactjs

Currently, I am working with Reactjs and Nextjs. I am utilizing functional components instead of classes. Within a loop, I have buttons and I am attempting to retrieve the id of the button when clicked using "onClick". Unfortunately, I am encountering th ...

JavaScript storage bulk insert problem

After spending a few hours exploring JsStore and experimenting with the getting started tutorial, I decided to work with the "tutors" database provided on the site. My goal was to insert some data into the database. var Value = [{TeacherName: "MR. BAUER", ...

Tips for generating an auto-incremented ID column in jQuery tables through the render method

My jQuery Datatable setup looks like this let purchasedProductTbl = $('#grdPurchasedProduct').DataTable({ filter: false, paging: false, lengthChange: false, searching: false, ordering ...

Receiving user input from a form element to incorporate into a JavaScript function for rendering on the webpage

Currently, I am attempting to gather input from the user in the form of two numbers. Upon clicking a button that executes a JavaScript function, the goal is to display the result on the webpage. However, upon running the code, it returns NaN I'm st ...

Javascript unable to access SVG element content on mobile Safari

My approach to reusing certain SVG objects involves defining symbols in an SVG element at the top of my DOM. When I want to display an SVG, I typically use: <svg><use xlink:href="#symbol-identifier" /></svg> For animating SVG's, I ...

What are some strategies for testing a dynamically loaded component in Vue?

Here is the code snippet of the component I am currently testing: <template> <component :is="content" /> </template> <script setup> import { defineAsyncComponent } from 'vue' import { useRoute } from 'vue ...

Endless scrolling with redux and react

I'm facing an issue while trying to implement infinite scroll in a React-based application that utilizes Redux for state management. I am attempting to dispatch an action on page scroll but have been unsuccessful so far. Below is my code snippet: // ...

How can I eliminate the extra '/' in all links when building with webpack and vue?

I have a question that might seem silly to some, but it's really frustrating me. I am currently working on a project using Vue with vue-cli. this is the webpack build result <!DOCTYPE html> <html> <head> <meta charset=utf- ...

JavaScript Generated From TypeScript Encountering TypeError

Why is the JavaScript code produced by this TypeScript snippet causing a TypeError upon execution? class Foo { public foo: { bar: number }; constructor() { this.foo["bar"] = 123; } } new Foo(); Even though I'm compiling it with the ...