Updating object properties in Typescript

I have written the following Angular 2 TypeScript code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   myObj:any = 
   [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];
}

I am looking to add new objects into myObj like

      { id: 21, name: 'Doctor Strange' },
      { id: 22, name: 'New Hero' }

Can anyone guide me on how I can achieve this? I am unsure about the process.

Answer №1

To add elements, follow these steps:

myArray.add(      
      { key: 1, value: 'First Value' },
      { key: 2, value: 'Second Value' });

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

Verify that each interface in an array includes all of its respective fields - Angular 8

I've recently created a collection of typed interfaces, each with optional fields. I'm wondering if there is an efficient method to verify that all interfaces in the array have their fields filled. Here's the interface I'm working wit ...

Limitations of MaterialUI Slider

Looking for a solution to distribute 350 points across 8 sliders, each with a range of 0-100 and 5 marks at 0, 25, 50, 75, and 100. With each step consuming or returning 25 points, the challenge lies in allowing users to adjust the points allocation withou ...

Determine whether the value from a JSON is a boolean (either true or false)

I have encountered an issue while trying to code a category on NSManagedObject. The goal is to allow the object to populate its attributes from a dictionary obtained through JSON using NSJSONSerialization. The problem I'm facing is that when the orig ...

What is the best way to save a Map for future use in different components?

Let's say I define an enum like this: export enum SomeEnum { SomeLongName = 1, AnotherName = 2 } Within my display components, I'm utilizing an enum map to translate the enum values into strings for presentation on the web app: enumMap = new Map ...

How to Transfer Rows Between Two DevExpress Grids in ASP.NET Core

In my current ASP.NET Core project using Razor pages, I have incorporated two devexpress grids. The main objective is to select a row from one grid, click on the floating action button labeled "add", and have that selected row transferred to the grid on th ...

I require the JSON data to be formatted in a visually appealing table style

I have a code snippet that is functioning perfectly. Here it is: import requests import xml.etree.ElementTree as ET import json def get_stock(sku): params = {'ItemId': sku} base_url = 'http://10.0.0.25/api/GetSku' respons ...

JSON-formatted public data sets

Can anyone point me towards a public dataset in Json format? Ideally, I am searching for one that falls within the 10-20GB range. The larger datasets I've come across so far have all been in XML format. ...

Enhance ReaderQuotas on WCF RESTful service for improved performance

My WCF REST Service is set up to receive a JSON string as input One of the parameters in the JSON object contains a lengthy string of numbers This is triggering an error that can be identified through tracing and using SVC Trace Viewer An error message ...

How can we implement `injectReducer` in Redux with TypeScript?

I have been working on a TypeScript React application with Redux to manage state. To dynamically add reducers, Redux suggested implementing an injectReducer function. In a JavaScript project, I successfully implemented this function. However, I am strugg ...

Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-cl ...

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

Merging an unspecified number of observables in Rxjs

My latest project involves creating a custom loader for @ngx-translate. The loader is designed to fetch multiple JSON translation files from a specific directory based on the chosen language. Currently, I am implementing file loading through an index.json ...

Unable to locate the next/google/font module in my Typescript project

Issue With Import Syntax for Font Types The documentation here provides an example: import { <font-name> } from 'next/google/font'; This code compiles successfully, but throws a "module not found" error at runtime. However, in this disc ...

Error: unable to locate module that was imported from

Every time I try to run the project using this command, an error pops up: > npm run build npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a9b7aa87fee9f1e9f0">[email protected]</a> npm info using ...

Deciphering the JSON array generated by PHP

When PHP returns a JSON array, the output may look like this: [ { "uid": "1", "username": "mike", "time_created": "2014-12-27 15:30:03", "time_updated": "2014-12-27 15:30:03", "time_expires": "2014-12-27 15:30:03" }, { "uid": ...

What could be causing AJAX to consistently return identical data to the callback function when distinct objects are supplied as arguments?

I am attempting to make two separate calls to an MVC controller. The first call returns a series of data, while the second call returns a partial view. When I check in Firebug, both calls show "success" status. I am trying to utilize a callback function t ...

The service value remains unchanged following a click event

I'm using a service to share values between 2 components. I am displaying this value in one component and trying to change it in the other by clicking on a button. However, the value is not being modified as expected. It seems like I may have some tro ...

Retrieving items from JSON using JQ in a complex nested file without specific identifiers

Trying to extract specific attributes from a generated JSON file obtained through Amazon CLI using JQ. The catch is that the top-level attributes are not named, making it a bit more challenging. [ [ { "State": "running", ...

What is the best way to display the source code of a function in TypeScript?

I am interested in obtaining the source code for my TypeScript function ** written in TypeScript **. Here is the TypeScript code: var fn = function (a:number, b:number) { return a + b; }; console.log("Code: " + fn); This code snippet displays the Ja ...

What is the best way to format WIQL JSON?

When using Postman, I have no trouble submitting a query to our Azure DevOps 2019 Server: POST https://<AZDOSERVER>/<COLLECTION>/<PROJECT>/<TEAM>/_apis/wit/wiql?api-version=5.0 {"query": "Select [System.Id] From WorkItems WHERE [Sy ...