Using AngularJS, learn how to populate array objects within a JSON object

Question

Using AngularJS, learn how to populate array objects within a JSON object

I'm trying to load array objects from a multi-select control, then populate a model object called "name" with its name and age values. After that, I want to load an array from a select element into the model object. However, the ng-model directive on the select control doesn't seem to be working.

<input type="text" class="form-control" ng-model="model.name" placeholder="Enter your name..." />
<input type="text" class="form-control" ng-model="model.age" placeholder="Enter your age..." />

<!--Select pets for the person model-->
<select ng-repeat="pet in arrayFromApi" class="selectpicker" multiple>
   <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
</select>


<script>
   var app = angular.module("myApp", []);
   app.controller("myCtrl", function($scope) {

    $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };

    $scope.arrayFromApi = function() {
          ......
        // This function retrieves IDs and names
     }
 });
 </script>

javascript angularjs arrays json model

Answer 1

Answer №1

To achieve this, consider utilizing ng-options. Alternatively, you can experiment with ng-repeat, but limit it to the option tag.

Answer 2

To achieve this, consider utilizing ng-options. Alternatively, you can experiment with ng-repeat, but limit it to the option tag.

Answer 3

Answer №2

It's advisable to avoid using ng-repeat when dealing with dropdowns as it can lead to performance issues. Instead, opt for ng-options.

If you want to set up a model with fields like name, age, and pets, take a look at the mixData function.


    <input type="text" class="form-control" ng-model="model.name" placeholder="Enter your name..." />
    <input type="text" class="form-control" ng-model="model.age" placeholder="Enter your age..." />

    <!-- Steer clear of using ng-repeat in dropdowns -->
    <!-- Choose pets for the person model -->
    <select ng-change="mixData()" class="selectpicker" multiple ng-model="myPets" ng-options="pet.id as pet.name for pet in arrayFromApi">
       <option value="">Select...</option>
    </select>

    <!--<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
       <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
    </select>-->


    <script>
       var app = angular.module("myApp", []);
       app.controller("myCtrl", function($scope) {

        $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };

        $scope.arrayFromApi = function() {
              ......
            // this function retrieves ids and names from the API
         }

        $scope.mixData = function(){
           $scope.model.pets = $scope.myPets;
        };
     });
    </script>

Answer 4

It's advisable to avoid using ng-repeat when dealing with dropdowns as it can lead to performance issues. Instead, opt for ng-options.

If you want to set up a model with fields like name, age, and pets, take a look at the mixData function.


    <input type="text" class="form-control" ng-model="model.name" placeholder="Enter your name..." />
    <input type="text" class="form-control" ng-model="model.age" placeholder="Enter your age..." />

    <!-- Steer clear of using ng-repeat in dropdowns -->
    <!-- Choose pets for the person model -->
    <select ng-change="mixData()" class="selectpicker" multiple ng-model="myPets" ng-options="pet.id as pet.name for pet in arrayFromApi">
       <option value="">Select...</option>
    </select>

    <!--<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
       <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
    </select>-->


    <script>
       var app = angular.module("myApp", []);
       app.controller("myCtrl", function($scope) {

        $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };

        $scope.arrayFromApi = function() {
              ......
            // this function retrieves ids and names from the API
         }

        $scope.mixData = function(){
           $scope.model.pets = $scope.myPets;
        };
     });
    </script>

Answer 5

Answer №3

If you want to follow best practices in Angular, it's recommended to utilize select along with the angular standard ng-options. This allows you to manage everything within your view and have multiple return types as an array to your controller like {id: n}.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.model = {};

  //from api
  $scope.arrayFromApi = [{
      id: 1,
      name: 'test'
    },
    {
      id: 2,
      name: 'test2'
    }
  ];

  $scope.getDetails = function() {
    console.log($scope.model);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="model.name" placeholder="Put your name..." />
  <input type="text" ng-model="model.age" placeholder="Put your age..." />

  <!--Select pets for model person-->
  <select ng-model="model.pets" ng-options="{id: item.id} as item.name for item in arrayFromApi" multiple></select>

  <button ng-click="getDetails()">save</button>
</div>

Answer 6

If you want to follow best practices in Angular, it's recommended to utilize select along with the angular standard ng-options. This allows you to manage everything within your view and have multiple return types as an array to your controller like {id: n}.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.model = {};

  //from api
  $scope.arrayFromApi = [{
      id: 1,
      name: 'test'
    },
    {
      id: 2,
      name: 'test2'
    }
  ];

  $scope.getDetails = function() {
    console.log($scope.model);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="model.name" placeholder="Put your name..." />
  <input type="text" ng-model="model.age" placeholder="Put your age..." />

  <!--Select pets for model person-->
  <select ng-model="model.pets" ng-options="{id: item.id} as item.name for item in arrayFromApi" multiple></select>

  <button ng-click="getDetails()">save</button>
</div>

Using AngularJS, learn how to populate array objects within a JSON object

Answer №1

Answer №2

Answer №3

Similar questions

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

HTML code is not displayed within the ng-template

Suggestions for changing sub-component data in Vue

The process of combining identical data values within an array of objects

At what stage of the Angular JS application life cycle is this code being loaded?

What are the best practices for properly formatting a function that returns a JSON string?

Changing the templateUrl of a directive on the fly using the controller

Upon executing `$('div')`, an empty array is returned

What is the reason for JSON.parse throwing errors on the same strings that eval does not?

Save the text entered into an input field into a Python variable

Capture data from ajax effectively by extracting and executing manipulations seamlessly

What is the best way to define one API route that accommodates two different query combinations?

Is it better to use scale.set() or simply increase the size of the model in Three.js?

Having trouble retrieving the array value from xpath

Turning text into clickable links using JavaScript

The AJAX request encountered an unexpected failure that cannot be identified (Using jQuery)

Choosing a value in the second dropdown menu based on the selection made in the first dropdown menu can be achieved by retrieving both values from the database using a common list

Text box content does not refresh unless the page is reloaded

Conceal any child elements that are cut off as a result of the overflow hidden property

What steps can be taken to address the error "console is undefined" in PowerShell?