Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality

Question

Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality

Within an ng-repeat loop, I have implemented a radio button that assigns the entire person object to a scope variable as shown below:

 <li ng-repeat="person in people">
   <label>{{person.name}}
     <input type="radio" ng-model="$parent.selectedPerson" name="name" value="{{person}}" required />
   </label>
</li>

When I select a person, my intention is to assign all of its properties to the selectedPerson scope variable so that I can later access and display information about the selected person. However, although I am able to assign the object to the selectedPerson scope variable, I am facing difficulty in printing its properties. Kindly review the scenario on JSFiddle for more details.

JSFiddle

Your assistance with this matter would be greatly appreciated.

javascript angularjs json

Answer 1

Answer №1

To connect the chosen object to ngModel, you can utilize ngValue as demonstrated in your jsfiddle:

<input type="radio" ng-model="$parent.selectedPerson" ng-value="person" name="name" value="{{person}}" required />

For more details and clarification, refer to the Angular Documentation on ngValue.

Answer 2

To connect the chosen object to ngModel, you can utilize ngValue as demonstrated in your jsfiddle:

<input type="radio" ng-model="$parent.selectedPerson" ng-value="person" name="name" value="{{person}}" required />

For more details and clarification, refer to the Angular Documentation on ngValue.

Answer 3

Answer №2

Angular interprets expressions enclosed in {{ }} on page load and re-evaluates them if their outcome changes. When an object is within the curly brackets, it gets converted to a string for debugging purposes.

In the case of 'value={{person}}', the result is a string that can be assigned to the selectedPerson object.

Rather than assigning the entire object to selectedPerson, assign only the name property like this: ng-model='$parent.selectedPerson.name' value='{{person.name}}'

Answer 4

Angular interprets expressions enclosed in {{ }} on page load and re-evaluates them if their outcome changes. When an object is within the curly brackets, it gets converted to a string for debugging purposes.

In the case of 'value={{person}}', the result is a string that can be assigned to the selectedPerson object.

Rather than assigning the entire object to selectedPerson, assign only the name property like this: ng-model='$parent.selectedPerson.name' value='{{person.name}}'

Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality

Answer №1

Answer №2

Similar questions

`Enhancing existing systems - extracting data from a JSON response`

Checking whether a node stream operates in objectMode

A collection of jQuery objects that consist of various DOM elements as their properties

Inserting an array into a MySQL database using PHP

Is there a way to begin using the :nth-child() selector from the last element instead of the first?

Utilizing NPM Package Configuration Variables with Docker Commands: A Guide

Error encountered when trying to update Express Mongoose due to duplicate key

Avoiding duplicate touch events with an if statement

Interpret information in Angular 2 using Typescript

React and Redux Toolkit collaborated to create a seamless shared state management system,

Issue with PHP incorrectly encoding JSON when writing to a file

What is the best way to submit a form using PHP to send an email, implement Ajax for seamless transitions, and display a message next to the form without any screen refresh?

sending parameters to a callback function that is listening for arguments

Run a function once the ajax request has been completed

What is the method to retrieve the image's value after dropping it onto the droppable area?

Guide on showing the content of an uploaded file as an object in JavaScript using file reader

Incorporate this form created externally onto my website

Unexpected outcomes arise when parsing headers from a file-based stream

Utilizing jQuery TableSorter Scroller: How to Achieve Scrolling with Keydown Focus

utilizing the active class with react js