Looking to dynamically display users added to an array in a table using Angular and JavaScript?

Question

Looking to dynamically display users added to an array in a table using Angular and JavaScript?

As a newcomer to javascript and angularjs, I recently attempted to build a table that would display all users in an array dynamically as new users are added through a form. However, each time I run my code, I encounter the error message "Fill out the entire form!". I am seeking guidance on what might be going wrong with my implementation and how I can rectify it.

Thank you in advance for your assistance!

My HTML:

<table>
<tr>
<td colspan="5" class="align-center"><input type="text" placeholder="Search Users" class="search-users" ng-click="userSearch"/></td>
</tr>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" id="formRace" />    </td>
<td><input type="text" placeholder="Class" class="add-user" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" id="formFaction" /></td>
</tr>
<tr>
<td colspan="4" class="align-right error-field" id="errorField"></td>
<td colspan="1" class="align-right"><button type="button" class="add-user" ng-click="addUser()"/> Add </button></td>
</tr>
</table>

My Javascript/Angular:

$scope.jsFirstName = document.getElementById('formFirstName').value;
$scope.jsLastName = document.getElementById('formLastName').value;
$scope.jsRace = document.getElementById('formRace').value;
$scope.jsClass = document.getElementById('formClass').value;
$scope.jsFaction = document.getElementById('formFaction').value;
$scope.jsID = users.length;
$scope.addUser = function () {
    $scope.character = {};
    $scope.character.id = $scope.jsID+1;
    $scope.character.firstName = $scope.jsFirstName;
    $scope.character.lastName = $scope.jsLastName;
    $scope.character.faction = $scope.jsFaction;
    $scope.character.class = $scope.jsClass;
    $scope.character.race = $scope.jsRace;

    if ($scope.jsFirstName.length === 0 || $scope.jsLastName.length === 0 || $scope.jsFaction.length === 0 || $scope.jsClass.length === 0 || $scope.jsRace.length === 0) {
        document.getElementById('errorField').innerHTML = "Fill out the entire form!";
    } else {
        users.push(character);
    }

};

});

javascript angularjs

Answer 1

Answer №1

When using AngularJS, it is recommended to utilize the ng-model directive for passing data from the view to the controller instead of manually handling it with Javascript. Avoid using document.getElementById within a controller.

To implement these changes in your code:

Add the ng-model directive in each input type.
Group all the form data into an object and use ng-model.

Example:

<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>

Create a user object and pass this object using ng-click="addUser(user)".

Working Example:

var app = angular.module('myApp',[]);
app.controller('userController',function($scope) {
    $scope.usersData = [];
    $scope.addUser = function(user) {
      $scope.usersData.push(user);
      $scope.user = {};
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userController">
<table>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" ng-model="user.formLastName" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" ng-model="user.formRace" id="formRace" />    </td>
<td><input type="text" placeholder="Class" class="add-user" ng-model="user.formClass" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" ng-model="user.formFaction" id="formFaction" /></td>
</tr>
<tr>
<td colspan="1" class="align-right">
<input type="button" class="add-user" ng-click="addUser(user)" value="Add User"/>
</td>
</tr>
</table>
<table>
<tr>
  <td>First Name</td>
  <td>Last Name</td>
  <td>Race</td>
  <td>Class</td>
  <td>Faction</td>
</tr>
<tr ng-repeat="users in usersData">
  <td>{{users.formFirstName}}</td>
  <td>{{users.formLastName}}</td>
  <td>{{users.formRace}}</td>
  <td>{{users.formClass}}</td>
  <td>{{users.formFaction}}</td>
</tr>
</table>
</div>

Answer 2

When using AngularJS, it is recommended to utilize the ng-model directive for passing data from the view to the controller instead of manually handling it with Javascript. Avoid using document.getElementById within a controller.

To implement these changes in your code:

Add the ng-model directive in each input type.
Group all the form data into an object and use ng-model.

Example:

<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>

Create a user object and pass this object using ng-click="addUser(user)".

Working Example:

var app = angular.module('myApp',[]);
app.controller('userController',function($scope) {
    $scope.usersData = [];
    $scope.addUser = function(user) {
      $scope.usersData.push(user);
      $scope.user = {};
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userController">
<table>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" ng-model="user.formLastName" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" ng-model="user.formRace" id="formRace" />    </td>
<td><input type="text" placeholder="Class" class="add-user" ng-model="user.formClass" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" ng-model="user.formFaction" id="formFaction" /></td>
</tr>
<tr>
<td colspan="1" class="align-right">
<input type="button" class="add-user" ng-click="addUser(user)" value="Add User"/>
</td>
</tr>
</table>
<table>
<tr>
  <td>First Name</td>
  <td>Last Name</td>
  <td>Race</td>
  <td>Class</td>
  <td>Faction</td>
</tr>
<tr ng-repeat="users in usersData">
  <td>{{users.formFirstName}}</td>
  <td>{{users.formLastName}}</td>
  <td>{{users.formRace}}</td>
  <td>{{users.formClass}}</td>
  <td>{{users.formFaction}}</td>
</tr>
</table>
</div>

Answer 3

Answer №2

If you're using Angular, it's important to avoid certain practices.

Let's consider a scenario from your code: FirstName :

<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Other similar lines -->

<td ng-bind="errorField"></td>
<!-- Alternatively -->
<td>{{errorField}}</td>

Since you have a controller, you can handle this in the following way:

$scope.addUser = function() {
    $scope.character = {};
    $scope.character.firstName = $scope.firstName;
    // Other similar lines

    if($scope.firstName === "") { // Additional conditions
        $scope.errorField = "Please complete the form";
    }
}

This is precisely why Angular was created.

Answer 4

If you're using Angular, it's important to avoid certain practices.

Let's consider a scenario from your code: FirstName :

<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Other similar lines -->

<td ng-bind="errorField"></td>
<!-- Alternatively -->
<td>{{errorField}}</td>

Since you have a controller, you can handle this in the following way:

$scope.addUser = function() {
    $scope.character = {};
    $scope.character.firstName = $scope.firstName;
    // Other similar lines

    if($scope.firstName === "") { // Additional conditions
        $scope.errorField = "Please complete the form";
    }
}

This is precisely why Angular was created.

Answer 5

Answer №3

When incorporating angular, make sure to utilize 2-way data binding by adding ng-model="fromFirstName" to your inputs. Set up a local variable in your controller like var firstname = $scope.formFirstName. With this setup, any changes made in real time will automatically reflect in both your views and models. To ensure input validation, check for emptiness when the user clicks the button. This approach should guide you through the process effectively.

Answer 6

When incorporating angular, make sure to utilize 2-way data binding by adding ng-model="fromFirstName" to your inputs. Set up a local variable in your controller like var firstname = $scope.formFirstName. With this setup, any changes made in real time will automatically reflect in both your views and models. To ensure input validation, check for emptiness when the user clicks the button. This approach should guide you through the process effectively.

Answer 7

Answer №4

Give this code a try:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<script>
var app = angular.module("myusersList", []);
app.controller("myCtrl", function($scope) {
    $scope.users = [{fname:"John",lname:"Doe",class:"12"},{fname:"Jane",lname:"Smith",class:"11"}];
    $scope.addUser = function () {
        var newUser = {};
        newUser.fname=$scope.fname;
newUser.lname=$scope.lname;
newUser.class=$scope.class;
        $scope.users.push(newUser);
    }
});
</script>

<div ng-app="myusersList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="data in users">First Name : {{data.fname}} last Name : {{data.lname}} class : {{data.class}}</li>
  </ul>
  <input ng-model="fname">
  <input ng-model="lname">
  <input ng-model="class">
  <button ng-click="addUser()">Add</button>
</div>

<p>Start typing in the input fields to add new users.</p>

</body>
</html>

Answer 8

Give this code a try:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<script>
var app = angular.module("myusersList", []);
app.controller("myCtrl", function($scope) {
    $scope.users = [{fname:"John",lname:"Doe",class:"12"},{fname:"Jane",lname:"Smith",class:"11"}];
    $scope.addUser = function () {
        var newUser = {};
        newUser.fname=$scope.fname;
newUser.lname=$scope.lname;
newUser.class=$scope.class;
        $scope.users.push(newUser);
    }
});
</script>

<div ng-app="myusersList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="data in users">First Name : {{data.fname}} last Name : {{data.lname}} class : {{data.class}}</li>
  </ul>
  <input ng-model="fname">
  <input ng-model="lname">
  <input ng-model="class">
  <button ng-click="addUser()">Add</button>
</div>

<p>Start typing in the input fields to add new users.</p>

</body>
</html>

Looking to dynamically display users added to an array in a table using Angular and JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What are the benefits of installing both libraries A (react-router) and B (react-router-dom) together, especially when library B relies on library A for functionality

`In TypeScript Angular, encountering challenges with accessing object properties`

AngularJS: Issue with inputMask functionality within an angularJS table

Updating the state after receiving API results asynchronously following a function call

attempting to link to an external style sheet hosted on Amazon S3

Add the JavaScript files to the components

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

Tabbed horizontal slider

What might be preventing combineLatest from executing?

Using Typescript to create a Checkbox Grid that displays pipe-delimited values and implements a custom validation rule

Sending a sound recording to the express js server with the help of multer

The JavaScript code is attempting to execute a PHP script, however, I am struggling to parse the JSON data returned for use in the

AngularJS is throwing an error claiming that the controller is not defined and is not a function

Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

Using local variables from an external HTML file within an AngularJS directive template

Using AngularDart: Maximizing Efficiency with Dual ng-repeat Expressions in a Single Tag

Make the adjustment from an H1 tag to an H2 tag with the help of

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

AngularJS nested ng-repeat for displaying multiple checkboxes

The webpage encountered an issue while trying to load a resource: the server returned a 500 (Internal Server Error) status message, preventing the submission of the data