Filling form fields with array data (AngularJS)

Question

Filling form fields with array data (AngularJS)

Although I'm new to AngularJS, I'm struggling to figure out how to handle a list of arrays returned from the searchAll function.

console
    0: {mobile: "12345678", lastname: "last01", firstname: "first01"}
    1: {mobile: "87654321", lastname: "last02", firstname: "first02"}
    ...

I want to populate these arrays into separate input fields using

ng-repeat="client in ctrl.clients"

<input ... ng-model="ctrl.client.firstname"
<input ... ng-model="ctrl.client.lastname"
<input ... ng-model="ctrl.client.mobile"

When I try to display the data as text by populating the following:

<li>First name: {{client.firstname}}</li>
<li>Last name: {{client.lastname}}</li>
<li>Mobile: {{client.mobile}}</li>

Ideally, the data should be shown within the input fields.

Any suggestions on how to achieve this would be greatly appreciated!

javascript arrays angularjs

Answer 1

Answer №1

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

<body ng-app="myApp">

  <div  ng-controller="myCtrl as ctrl">
    <div ng-repeat="client in ctrl.clients">
      <input type="text" ng-model="client.firstname" />
      <input type="text" ng-model="client.lastname" />
      <input type="text" ng-model="client.mobile" />
    </div>
    <pre>{{ctrl.clients | json}}<pre>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function() {
      this.clients = [{
        mobile: "12345678",
        lastname: "last01",
        firstname: "first01"
      }, {
        mobile: "87654321",
        lastname: "last02",
        firstname: "first02"
      }];
    });
  </script>

</body>

</html>

If you're looking to populate the object provided, please check out the code snippet above. I've included a <pre> tag to display the live object.

Answer 2

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

<body ng-app="myApp">

  <div  ng-controller="myCtrl as ctrl">
    <div ng-repeat="client in ctrl.clients">
      <input type="text" ng-model="client.firstname" />
      <input type="text" ng-model="client.lastname" />
      <input type="text" ng-model="client.mobile" />
    </div>
    <pre>{{ctrl.clients | json}}<pre>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function() {
      this.clients = [{
        mobile: "12345678",
        lastname: "last01",
        firstname: "first01"
      }, {
        mobile: "87654321",
        lastname: "last02",
        firstname: "first02"
      }];
    });
  </script>

</body>

</html>

If you're looking to populate the object provided, please check out the code snippet above. I've included a <pre> tag to display the live object.

Filling form fields with array data (AngularJS)

Answer №1

Similar questions

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

Tips on displaying a particular JSON attribute?

Expanding box geometry from a single side in Three.js

Mastering Generic Types in Functions in Typescript

Azure experiencing issue with MUI Datepicker where selected date is shifted by one day

Eslint is actively monitoring files specified in the eslintignore to ensure they meet the set

How to send a function from a parent component to a child component in Vue.js

Struggling to properly parse JSON data using jQuery

The process of transferring ViewBag value as a parameter in an AngularJS function

JavaScript: inscribe in a specific cell

Is the Positioning of JS Scripts in Pug and Jade Documents Important?

Challenges when using deep linking to URL with AngularJS ui-router

The ever-changing world of list items with dynamic editions

Unable to retrieve function variables stored in fancytree source nodes within its activate method

Can a value of a variable be "stored" in NodeJS?

Retrieve URL query parameters using AngularUI

Display identical elements from an array and shuffle them every 300 seconds

Achieving the retrieval of all data can be done simply by utilizing the `echo json_encode($data);

Incorporating a JavaScript script into my Angular 7 project

I'm just starting out with jQuery and JSON and could use some assistance with formatting the string, specifically so I can properly iterate through it