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.

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

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}}'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging Arrays with AJAX Promises

I am currently working on making multiple AJAX calls using promises. I want to combine the two responses, analyze them collectively, and then generate a final response. Here is my current approach: var responseData = []; for (var i=0; i<letsSayTwo; i++ ...

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

Utilizing a TypeScript function to trigger an action from within a Chart.js option callback

Currently, I am utilizing a wrapper for Chart.js that enables an animation callback to signify when the chart has finished drawing. The chart options in my code are set up like this: public chartOptions: any = { animation: { duration: 2000, ...

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

Placing an image on a three.js cube using overlay does not function properly

I attempted to superimpose an image onto a cube by utilizing code from GPT chat and Blackbox AI, but in both cases, I encountered a black screen. I saved the code in a file named test.html and tested it on Google Chrome and Opera GX browsers, only to be me ...

"Responding to an Ajax request with a .NET Core server by sending an xlsx

My web application exclusively supports .xlsx files. I have implemented a function in my controller that converts .xls files to .xlsx format successfully. When trying to open a .xls file, I send it via an Ajax request. However, the converted .xlsx file do ...

Guide on spinning a particle in three.js

I am encountering an issue with a particle that leaves a circle behind when rotated as an image. How can I eliminate this unwanted circle effect? Check out the code on this Fiddle: http://jsfiddle.net/zUvsp/137/ Here's the code snippet: var camera, ...

Position items within the dynamically generated div without appending them

Utilizing JavaScript, I dynamically generate a line but struggle to position two balls at both the 1/3 mark from the beginning and end. For reference, please view the image below. I aim to have two balls appear upon pressing enter in the input box. Despite ...

Combining two lists in immutable.js by flattening and zipping

When faced with two immutable lists, such as: const x = [5,6,7]; const y = [x,y,z,w]; Is there a straightforward method to combine/interleave them in order to obtain: const z = [5,x,6,y,7,z,w]; ...

The object returned by bodyParser is not a string but a data structure

I have been working on implementing a JSON content listener in Typescript using Express and Body-parser. Everything is functioning perfectly, except when I receive the JSON webhook, it is logged as an object instead of a string. import express from 'e ...

The AJAX request to fetch XML data resulted in a failure to redirect as intended

I'm encountering an issue with redirection after retrieving the XML data. The scenario involves a login process that fetches the ID values for username and password, verifies their existence, and then displays the alert "worked." However, despite show ...

Stop jQuery from submitting the form in case of validation errors

Hey there, I'm currently working on preventing the AJAX form submission function from happening if one of the inputs fails validation. Edit: Specifically, I'm looking for guidance on what changes need to be made in //Adult age validation and var ...

Refreshing HTML Form upon Submit using JavaScript

I've been searching through various discussions without any luck, but I'm encountering an issue with a form that successfully submits data to a Google Sheet, yet the input fields retain their content after submission. Here is the code: <form ...

Determining the total number of current connections using JavaScript, jQuery, and Selenium WebDriver

I need your assistance as I've encountered a roadblock. In my automated tests using Selenium WebDriver + Java, I rely on the following code snippet to check for active background AJAX connections: private boolean hasNoActiveConnections() { retur ...

Does JavaScript automatically round large numbers?

I have a simple array: myArray = [{"egn":79090114464},{"egn":92122244001},{"egn":10005870397643185154},{"egn":10000330397652279629},{"egn":10000330397652279660},] However, when I append the values from thi ...

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

Can you use both HTML and JSON in ROR?

The scaffolding process generates controllers that include Create/Update methods. These methods are responsible for rendering HTML as well as JSON data. While I am familiar with HTML, I have limited knowledge about JSON. Should JSON be included in this cod ...

Removing a value from an array of objects in Angular 2

There is a single array that holds objects: one = [ {name: 'Name', key: '4868466'}, {name: 'Name', key: '4868466'}, {name: 'Name', key: '4868466'}, {name: 'Name', key: & ...

Animation loading on React.js when the page or URL is changed

Just starting out with React and trying to incorporate a loading animation when the page/url changes on button click - check it out here: https://codesandbox.io/s/cthululel-7zmsl?fontsize=14 Successfully got the animation working on initial load, but runn ...

What are the steps to create a "load more" button that displays additional rows?

Struggling to get the code right for my webpage. I have a layout with 6 rows, each containing 3 columns filled with images. However, when I click on the "load more" button, nothing happens. I've attempted to modify the jQuery code from .slice(0, 3) t ...