tutorial on adding a user-inputted value to an array in AngularJS

I need assistance with organizing my input fields that are categorized under different headings:-

<label>Customer</label>
  <input type="text" ng-model="a.arr.customerName" name="arr[0]"/>
  <input type="text" ng-model="a.arr.customerDOB" name="arr[0]"/>
  <input type="text" ng-model="a.arr.customerPanNo" name="arr[0]"/>

<label>Employee</label>
  <input type="text" ng-model="a.arr.employeeName" name="arr[1]"/>
  <input type="text" ng-model="a.arr.employeeDOB" name="arr[1]"/>
  <input type="text" ng-model="a.arr.employeePanNo" name="arr[1]"/>

<label>Contractors</label>
  <input type="text" ng-model="a.arr.contractorName" name="arr[2]"/>
  <input type="text" ng-model="a.arr.contractorDOB" name="arr[2]"/>
  <input type="text" ng-model="a.arr.contractorPanNo" name="arr[2]"/>

I am looking to store the above data in the format:-

[{a.arr.customerName:any value},{a.arr.employeeName:any value},{a.arr.contractorName:any value}]
. However, the current structure I am achieving is:-
{a.arr.customerName:any value,a.arr.employeeName:any value,a.arr.contractorName:any value}
. Is there a solution for this issue?

Answer №1

To properly store data, you must save it in the following manner:

myArray = [];
//Before assigning keys to the array, be sure to define an object for each index.
myArray[i] = {};

Answer №2

Give this a shot

 var newArr=[]; newArr.push({'userInfo.username':$scope.userInfo.username,{'userInfo.empname':$scope.userInfo.empname}})

Answer №3

In essence, the goal is to transform your object into an array of its properties. I recommend keeping the existing code untouched and simply introducing a new controller property to store this array of properties.

To achieve this, you can use the following code snippet:

var obj = {name: "value1", age: "value2", city: "value3"};
var newArr = [];
var keys = Object.keys(obj);
for(var j=0; j<keys.length; j++){
    newArr.push({});
    newArr[newArr.length - 1][keys[j]] = obj[keys[j]];
};

If you have any further questions or need clarification on anything else related to this topic, feel free to reach out.

Warm regards

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

Clicking on a link initiates the dropdown menu for selecting an option

This project is specifically designed for mobile use, so there's no need to worry about how it will appear on desktop screens. In this project, I have an "a href" with an icon next to it that simulates a button. When a user clicks on it, a dropdown me ...

Dygraphs.js failing to display the second data point

My website features a graph for currency comparison using Dygraphs. Everything was working fine until I encountered this strange issue. https://i.stack.imgur.com/OGcCA.png The graph only displays the first and third values, consistently skipping the seco ...

How should filtering be properly done on a data array within a Redux reducer function?

I am trying to develop a function that filters an array based on a search input. The goal is for the filter action to trigger when there's a change in the SEARCH_TEXT. However, I'm facing confusion when it comes to handling the state when the del ...

Guide on linking an id with a trigger function in HTML and JavaScript

In the snippet below, I aim to create a responsive feature based on user input of 'mute' and 'muteon'. Whenever one of these is entered into the textbox, it will change the color of linked elements with the IDs "text" and "text1" to red ...

"Step-by-step guide on associating JSON data with <li> elements using AngularJS

Currently, I am working on creating an application using AngularJS that involves retrieving data from a database and populating a list item with that data. To achieve this, I have written a WebMethod as shown below: [WebMethod] public static string g ...

Generating a sequential array of dates and times in Angular

Currently, I am working on implementing a feature that will allow users to see the available visit times between two dates they select, specifically from 8:00 to 17:00 every day. For instance: If a user selects 1 Sep to 4 Sep, the system should return [1. ...

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Is there a way to either clear an HTML input field of a previous set number when onFocus is triggered or start with an empty field? When salary: null is set in the constructor, a warning appears on page load: Warning: The value prop on input should not ...

fullpage.js not being used alongside bootstrap

On my webpage, I've integrated Bootstrap 4 and fullpage.js. However, when I apply the bootstrap col to sections, they stack vertically instead of appearing side by side. This is the HTML code: <div class="container-fluid position-relative"> &l ...

How can I create a new PHP table using data from an existing table?

I have a table displayed on my website with the code snippet providedview the table image here Here is the code for generating this table: <?php $query = $db->query("SELECT * FROM bit_exchanges ORDER BY id DESC LIMIT 20"); if($query-> ...

The Enigma of AngularJS Coding

Check out this code snippet. $scope.$watch('year', reloadData); $scope.$watch('month', reloadData); $scope.year = 2017; $scope.month = 1; var reloadData = function() { /* Refresh Data */ } var init = function() { $scope.year ...

sent a data entry through ajax and performed validation using jquery

Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...

Obtaining the most recent commit date through the Github API

I'm in the process of creating a database containing git repositories and I'm curious about how to extract the date of the most recent commit for a repository listed in my database. My experience with the github API is limited, so I'm strug ...

In both Chrome and Edge, the default value for the <select> tag is successfully set, however, this functionality is not working in

I have defined two values in the created method, 2018 and My Name, and assigned them to separate data properties. These data properties are then passed as v-bind to a component. The issue I am facing is that in Chrome and Edge, both values are set as defa ...

Unusual behavior observed in $.post function

My function is designed to work with dynamic (ajax) content and operates as follows. Upon checking Firebug, I can see that the ajax query is receiving a response from the server side. However, the line $(".playlist-content").html(result); does not execute ...

Displaying a div when a button is clicked (PHP)

Hello everyone, I'm new to posting here so please bear with me if I seem inexperienced. On my website, there is a button that needs to disappear when clicked and be replaced by a form without refreshing the page. I was able to accomplish this using ...

Tips for incorporating momentjs into TypeScript within AngularJS 1.5

I am looking to integrate the momentJs library into my TypeScript code for Date object operations. However, I need some guidance on how to inject TypeScript in AngularJS, as it differs slightly from JavaScript. angular.module("app") .config(functio ...

The resizing of iframes in Javascript is malfunctioning when it comes to cross-domain functionality

I have implemented a script to dynamically resize iframe height and width based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newheight=docume ...

In Flow, how is the asterisk (*) type utilized and what is its counterpart in TypeScript?

My expertise lies mostly in TypeScript, but I recently came across Flow which seems quite similar to TS in many aspects. However, one thing that caught my attention is the asterisk (*) type in Flow. Initially, I thought it was just another way of represent ...

What is the best way to fill a table with dates by using the date chosen by a user through the Angular UI datepicker?

I am looking to populate a table with 24 consecutive dates, starting from a selected date. For example, if I choose 7/1/2017, the table should display dates ranging from 7/2/2017 to 7/25/2017. Previously, I achieved this using Jquery's datepicker as ...

Issue with TableHead not functioning properly when sorting is requested

I'm currently facing an issue with my table that has clickable row headers for sorting functionality using the onRequestSort function. Unfortunately, it seems like this feature is not working as expected. I have implemented the sorting logic using rea ...