Exploring AngularJS: Effortlessly Retrieving Object Values

Question

Exploring AngularJS: Effortlessly Retrieving Object Values

HTML:

  <div ng-app = "" ng-controller = "personController">
     <p>Persoon: 
        <select ng-model="persoon">
           <option ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>
        </select>
     </p>
     <p>De geboortedatum van <b>{{persoon}}</b> is {{persoon.BirthDate}} en is dus 16 jaar</p>
  </div>

  <script>
     function personController($scope,$http) {
        var persons = "persons.txt";
        var persoon = "";
        $http.get(persons).then( function(response) {
           $scope.persons = response.data;
        });
     }
  </script>

JSON:

[
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

]

Display the BirthDate of the selected person from the dropdown list. Need help with making it work correctly, as I've tried various approaches without success. Any assistance would be greatly appreciated.

javascript angularjs json ajax

Answer 1

Answer №1

To set the value, use person.BirthDate

 <option  value="{{person.BirthDate}}"  ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>

SAMPLE

 var app = angular.module('myapp',[]);
 app.controller('personController',function($scope){
 $scope.persons = [
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController">
     <p>Person: 
        <select ng-model="person">
           <option  value="{{person.BirthDate}}"  ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>
        </select>
     </p>
     <p>The birth date of <b>{{person}}</b> is {{person.BirthDate}} and he/she is now 16 years old</p>
  </div>

UPDATE

It's advisable to utilize ng-options over ng-repeat.

SAMPLE

var app = angular.module('myapp',[]);
 app.controller('personController',function($scope){
 $scope.persons = [
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController">
     <p>Person: 
        <select ng-model="person" ng-options="n.FirstName + ' ' + n.FamilyName for n in persons"></select>
     </p>
     <p>The birth date of <b>{{person}}</b> is {{person.BirthDate}} and he/she is now 16 years old</p>
  </div>

Answer 2

To set the value, use person.BirthDate

 <option  value="{{person.BirthDate}}"  ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>

SAMPLE

 var app = angular.module('myapp',[]);
 app.controller('personController',function($scope){
 $scope.persons = [
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController">
     <p>Person: 
        <select ng-model="person">
           <option  value="{{person.BirthDate}}"  ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>
        </select>
     </p>
     <p>The birth date of <b>{{person}}</b> is {{person.BirthDate}} and he/she is now 16 years old</p>
  </div>

UPDATE

It's advisable to utilize ng-options over ng-repeat.

SAMPLE

var app = angular.module('myapp',[]);
 app.controller('personController',function($scope){
 $scope.persons = [
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController">
     <p>Person: 
        <select ng-model="person" ng-options="n.FirstName + ' ' + n.FamilyName for n in persons"></select>
     </p>
     <p>The birth date of <b>{{person}}</b> is {{person.BirthDate}} and he/she is now 16 years old</p>
  </div>

Exploring AngularJS: Effortlessly Retrieving Object Values

Answer №1

Similar questions

Trouble arises when attempting AJAX call to PHP file resulting in failed MySQL execution accompanied by errors

What steps can be taken to automatically scroll to an element in a Protractor test when the element cannot be found within the view?

The output of jquery's val() function will not show the actual value

Issue with passing reactive property to component in Vue 3 application

What strategies can be implemented to improve the load time for bigvideo.js?

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

Information disappearing upon returning to a previous screen

Oops! Something went wrong: [$compile:ctreq] The controller 'ngModel' needed for the directive 'ngShow' cannot be located

Dynamic loading and endless scrolling in jQuery with advanced filtering functionality

The functionality of Inettuts within JavaScript seems to malfunction whenever I attempt to reposition the div

Updating elements within an array on the fly

Discover the complete file path using node.js incorporating the express-busboy module

Tips for embedding a file within a text box in HTML and enabling users to make direct edits

Objects that are included into an array will end up with an undefined value

Attempt to generate a function in JavaScript that mirrors an existing one

Text Separation Within a Singular JSON Object

parsing an array using jQuery's getJSON

Changing the color of placeholder text in MUI 5 TextField

What is preventing the action method from receiving parameters from the ajax call?

Why is the output [[]] instead of [] after removing the last array like [["1"]] using .splice()?