What is the best way to dynamically insert values into a JSON object?

Question

What is the best way to dynamically insert values into a JSON object?

I'm currently working with a JSON object in Angular and I need to dynamically add values that the user enters. Despite searching extensively, I haven't found a straightforward method to achieve this. I simply want to understand how to append key-value pairs to the JSON object.
Below is the TypeScript code sample:

 people: any[]=[{
          "name": "jacob",
          "age": 22 },
          {
          "name": "sruthi",
          "age": 29 }
      
  ]

My goal is to update the JSON object with new names and ages as users input them.
The corresponding HTML code snippet is shown below:

  <input type="text" class="frm-control" placeholder="Enter Name" (change)="insert_name($event.target.value)">  
  <input type="text" class="frm-control" placeholder="Enter Age" (change)="insert_age($event.target.value)">
  <br>
  <button type="button" class="btn btn-success" style="margin-top:10px;" (click)="submit()">Submit</button>

json angular typescript

Answer 1

Answer №1

One way to achieve this is by using the push() function

this.people.push({name:this.name, age:this.age})

Answer 2

One way to achieve this is by using the push() function

this.people.push({name:this.name, age:this.age})

Answer 3

Answer №2

If you want the simplest way to achieve this, just use people.push(<person>). However, for a more Angular or general best practice approach, consider creating a Person class instead of using the any type.

 class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
 }
 
 const people = [];
 people.push(new Person('Jacob', 22));
 people.push(new Person('Sruthi', 29));


console.log(people);

When your Button is clicked, it will trigger a function that adds a new Person object to the people array.

To enhance your form functionalities including validation, submission, and modeling, I suggest implementing Reactive Forms.

https://angular.io/guide/reactive-forms

Answer 4

If you want the simplest way to achieve this, just use people.push(<person>). However, for a more Angular or general best practice approach, consider creating a Person class instead of using the any type.

 class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
 }
 
 const people = [];
 people.push(new Person('Jacob', 22));
 people.push(new Person('Sruthi', 29));


console.log(people);

When your Button is clicked, it will trigger a function that adds a new Person object to the people array.

To enhance your form functionalities including validation, submission, and modeling, I suggest implementing Reactive Forms.

https://angular.io/guide/reactive-forms

What is the best way to dynamically insert values into a JSON object?

Answer №1

Answer №2

Similar questions

Error displaying messages from the console.log function within a TypeScript script

What are the methods to alter validation for a Formfield based on the input from other Formfields?

Exploring JSON objects within a Flask application

Using boolean value as default input value in React

What is the most effective way to determine the data type of a variable?

Preserving the information from a webpage by utilizing casperjs for scraping and saving table data

Tips for managing boolean values in a JSON data structure

Harnessing the power of React context alongside React hooks in TypeScript

Node.js, sigma.js, and the typescript environment do not have a defined window

"Configuration parameter stored in a JSON file within the public directory of a Create React App

How to write JSON while maintaining double backslashes

Sorting through a list of strings by checking for a specific character within each string

Ways to induce scrolling in an overflow-y container

Javascript Google Maps API is not working properly when trying to load the Gmap via a Json

Troubleshooting a Django TypeError while parsing JSON: A step-by-step guide

Issue encountered while attempting to transform a POJO Class into a JSON String using GSON

Transforming a list into Json format within Robot Framework

tips for dealing with nested json objects in C#

Here's how to retrieve a property from a union type object in Typescript without the need for type casting

The image hover feature is not functioning as expected in Angular 4