Storing user input with AngularJS

Question

Storing user input with AngularJS

I have a form below that I am trying to save. Please review my HTML code for the form.

HTML

<form ng-submit="save()">
    <input type="text" ng-model="user.name"/>
    <input type="text" ng-model="user.age"/>
    <input type="text" ng-model="user.homenumber"/>
    <input type="text" ng-model="user.road"/>
    <input type="text" ng-model="user.city"/>
    <input type="text" ng-model="user.school"/>
    <button type="submit">Save </button>
</form>

I used the following function to save the form data:

$scope.save = function (){
    console.log($scope.user)
}

The result after saving looks like this:

{ name:"dais",
  age:"24",
  "homenumber":"23",
  "road":"new road",
  "city":"colombo",
  school:"new school"
}

However, I need to save the form as a JSON object in the requested format:

Requested format:

{name:"dais",
 age:"24",
 "address":{
     "homenumber":"23",
     "road":"new road",
     "city":"colombo"
 },
 school:"new school"
}

Can someone help me modify my save function to achieve this?

javascript angularjs

Answer 1

Answer №1

To store address information, create an address object:

$scope.user = {};
$scope.user.address = {};

$scope.save = function () {
    console.log($scope.user);
}

<form ng-submit="save()">
    <input type="text" ng-model="user.name"/>
    <input type="text" ng-model="user.age"/>
    <input type="text" ng-model="user.address.homenumber"/>
    <input type="text" ng-model="user.address.road"/>
    <input type="text" ng-model="user.address.city"/>
    <input type="text" ng-model="user.school"/>
    <button type="submit">Save </button>
</form>

Answer 2

To store address information, create an address object:

$scope.user = {};
$scope.user.address = {};

$scope.save = function () {
    console.log($scope.user);
}

<form ng-submit="save()">
    <input type="text" ng-model="user.name"/>
    <input type="text" ng-model="user.age"/>
    <input type="text" ng-model="user.address.homenumber"/>
    <input type="text" ng-model="user.address.road"/>
    <input type="text" ng-model="user.address.city"/>
    <input type="text" ng-model="user.school"/>
    <button type="submit">Save </button>
</form>

Answer 3

Answer №2

<input type="text" ng-model="user.homenumber"/>
<input type="text" ng-model="user.road"/>
<input type="text" ng-model="user.city"/>

Must use

<input type="text" ng-model="user.address.homenumber"/>
<input type="text" ng-model="user.address.road"/>
<input type="text" ng-model="user.address.city"/>

Answer 4

<input type="text" ng-model="user.homenumber"/>
<input type="text" ng-model="user.road"/>
<input type="text" ng-model="user.city"/>

Must use

<input type="text" ng-model="user.address.homenumber"/>
<input type="text" ng-model="user.address.road"/>
<input type="text" ng-model="user.address.city"/>

Answer 5

Answer №3

One way to structure your code is by creating a constructor function

function UserData(user){
  this.name = user.name;
  this.age = user.age;
  this.address ={homenumber : user.homenumber, road:user.road, city:user.city };
  this.school = user.school
}

You can then implement it in the following manner

 $scope.save = function (){
  let userDataToSave = new UserData($scope.user);
  console.log(userDataToSave);
}

Answer 6

One way to structure your code is by creating a constructor function

function UserData(user){
  this.name = user.name;
  this.age = user.age;
  this.address ={homenumber : user.homenumber, road:user.road, city:user.city };
  this.school = user.school
}

You can then implement it in the following manner

 $scope.save = function (){
  let userDataToSave = new UserData($scope.user);
  console.log(userDataToSave);
}

Storing user input with AngularJS

HTML

Answer №1

Answer №2

Answer №3

Similar questions

Issue with h2 tag within JQuery's read more feature

Issue: [ng:areq] The function 'DepartmentCustomReportController' is missing and undefined in Internet Explorer

The express app.get middleware seems to be malfunctioning due to a 'SyntaxError: Unexpected end of input'

Tips for retrieving and transferring the device key during social login with Cognito and AWS Amplify

Exclusively for Numerical Input with Number Keys

Vue users are experiencing issues with the functionality of the Chart js plugin annotation

Retrieving the selected value from a Bootstrap dropdown using JavaScript when there are multiple dropdowns present

Error: The function row.child.hasClass is not a recognized function

Could there be a more efficient method to enable support for all video formats?

Using a jQuery gallery can cause links to become unresponsive and unclickable

Struggling with mapping through a multidimensional array?

The function chartobject-1.render() is returning an error message stating: "Unable to locate the specified container within the document. This issue is occurring in the

Is there a way to remove CSS based on the generated HTML code?

Updating the state of an object nested within another object in React JS

Count of elements in one flexbox row

Is there a way to link two HTML files containing jQuery within an HTML index file?

Session storage conditional statement is not behaving as anticipated in JavaScript

What is the process for assigning a random string value to each document within a mongodb collection using the mongo shell?

What is the best way to sort through an array depending on a specific sequence of elements provided

Obtaining values from multi-dimensional arrays with JavaScript and node.js