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

Showcase fullcalendar events that span across multiple rows and columns

Sending back JSON data in response to an AJAX request with speed and efficiency

Leverage the power of Angular CLI within your current project

When using VueJS routing with the same component, the OWL Carousel does not get triggered

Dynamic display of images using AJAX and ASP.NET web service

Extracting information from a designated website using Python, including pages with search functionality and javascript features

Looking to achieve a mouse over effect in jQuery?

Utilize a Google Chrome extension to interact with the DOM of the active tab

What is the best method for securely storing and managing refresh and access tokens within a node.js application?

I am unable to enter any text in an angular modal

Guide to generating a text string by utilizing the foreach loop

Is there a way for me to come back after all child http requests have finished within a parent http request?

What is the proper way to provide parameters for express.use to avoid encountering a type error?

Trouble updating outside controller data while using AngularJS directive inside ng-repeat loop

The audio directory is not included in the build of the Ionic framework, causing it to be skipped and absent

Troubleshooting AngularJS: Why does a basic $scope console.log() statement return undefined

React - The content of my JSON.String vanishes upon being placed inside a div element

What is the process of transforming the character u0421 into the letter "C"?

Extract information from a webpage using JavaScript through the R programming language

Exploring Dynamic Datatype for Deserializing JSON in WinRT