A guide on receiving object input within AngularJS

Question

A guide on receiving object input within AngularJS

I am working on a form that looks like this:

<input type="text" ng-model="gen.name" ng-repeat="gen in movie.genres">

The gen in the movie.genre is an object with two key-value pairs:

Object{
 id: 24,
 name : insidious
}

However, when I submit the form, I only receive the value of gen.name, but I also need to obtain the id of the gen object.

How can I modify my code to retrieve the id as well? It's important to note that there are multiple input values since they are inside an ng-repeat loop.

javascript angularjs forms input

Answer 1

Answer №1

Utilizing Array.findIndex() can help you locate the id of the object associated with the selected genre name.

Try something similar to this (assuming movie.genres is an array and valueFromForm represents the value from your ng-model):

let index = movie.genres.findIndex(gen => gen.name === valueFromForm);
id = movie.genres[index].id;

This piece of code utilizes ES6 syntax, so it may require modern browsers unless transcompiled. For older browser support, consider using this alternative version:

var id = -1;
for (var i=0; i < movie.genres.length; i++) {
  if (movie.genres[i].name === valueFromForm) {
    id = movie.genres[i].id;
    break;
  }
}

Answer 2

Utilizing Array.findIndex() can help you locate the id of the object associated with the selected genre name.

Try something similar to this (assuming movie.genres is an array and valueFromForm represents the value from your ng-model):

let index = movie.genres.findIndex(gen => gen.name === valueFromForm);
id = movie.genres[index].id;

This piece of code utilizes ES6 syntax, so it may require modern browsers unless transcompiled. For older browser support, consider using this alternative version:

var id = -1;
for (var i=0; i < movie.genres.length; i++) {
  if (movie.genres[i].name === valueFromForm) {
    id = movie.genres[i].id;
    break;
  }
}

Answer 3

Answer №2

This code snippet showcases a practical example that addresses your specific needs. I trust that this demonstration will aid you in resolving your issue:

angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', '$log', function($scope, $log) {
        $scope.movie = {
            title: 'Movie Title',
            genres: [{
                name: 'Action'
            }, {
                name: 'Drama'
            }, {
                name: 'Comedy'
            }]
        };
        $scope.submit = function() {
            $log.info($scope.movie);
        };
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<div ng-app="submitExample">
    <form ng-submit="submit()" ng-controller="ExampleController">
        <input ng-model="gen.name" ng-repeat="gen in movie.genres"><br>
        <input type="submit" value="Submit">
    </form>
</div>

Answer 4

This code snippet showcases a practical example that addresses your specific needs. I trust that this demonstration will aid you in resolving your issue:

angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', '$log', function($scope, $log) {
        $scope.movie = {
            title: 'Movie Title',
            genres: [{
                name: 'Action'
            }, {
                name: 'Drama'
            }, {
                name: 'Comedy'
            }]
        };
        $scope.submit = function() {
            $log.info($scope.movie);
        };
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<div ng-app="submitExample">
    <form ng-submit="submit()" ng-controller="ExampleController">
        <input ng-model="gen.name" ng-repeat="gen in movie.genres"><br>
        <input type="submit" value="Submit">
    </form>
</div>

A guide on receiving object input within AngularJS

Answer №1

Answer №2

Similar questions

Having difficulties with initializing npm when trying to start a new project

Retrieve information from an external JSON file and display it in a jstree

Caution: Server Components can only pass plain objects to Client Components

Include chosen select option in Jquery form submission

What is the best way to incorporate an onmouseover event so that when the mouse hovers over an image, play/stop/pause buttons are displayed

Facing an issue where WordPress AJAX is not showing the expected content

Add a third-party library file to Visual Studio

Consolidate test outcomes from various nodes in the stack into a single graph

Is it necessary for me to manually delete the node in JavaScript, or does the garbage collector handle that task automatically?

Is it possible to generate a Token in Nexus for private packages without using the UI interface?

Alternating the tooltip icon based on the field's condition

"Step-by-Step Guide: Integrate Cloudinary Upload Widget with Angular Framework

The Viadeo Social Toolbox seems to be encountering technical difficulties at the moment

Transforming a pseudo element from horizontal to vertical orientation

Creating a personalized audio player using HTML

The API for /api/addproducts has been resolved without a response being sent, potentially causing delays in processing requests

What is the reason for the error that is being caused by using arrow functions in my code

Hmm, I seem to be encountering an error where res.sendStatus is not recognized as a function. What could be causing this

What is the best way to change a canvas into an image while preserving transparency?

Turn on / off Button Using a Different Button