Using AngularJS to showcase the values of various object properties in an input field, separated by commas

Question

Using AngularJS to showcase the values of various object properties in an input field, separated by commas

Within my JSON object array, the structure is as follows:

users=[{id:'1',name:'ABC'},{id:'2',name:'DEF'},............]

To present the names of all users in a single input text field separated by commas, I am aiming for an outcome similar to the image below.

https://i.sstatic.net/Yhuak.jpg

I attempted utilizing the ng-list directive. However, this necessitated individually iterating through each user object, extracting and storing their names in a distinct array, which would subsequently serve as the ng-model for the <input> element. Are there any simpler or alternative approaches within angularjs?

javascript angularjs arrays angular-nglist

Answer 1

Answer №1

An effective solution in JavaScript involves utilizing the Map function to extract the desired property from an array and then using a join method to combine the values.

 var users=[{id:'1',name:'ABC'},{id:'2',name:'DEF'}];

 $scope.userModel = users.map(function(el){return el.name}).join(",");

 <input type="text" ng-model="userModel">

Answer 2

An effective solution in JavaScript involves utilizing the Map function to extract the desired property from an array and then using a join method to combine the values.

 var users=[{id:'1',name:'ABC'},{id:'2',name:'DEF'}];

 $scope.userModel = users.map(function(el){return el.name}).join(",");

 <input type="text" ng-model="userModel">

Using AngularJS to showcase the values of various object properties in an input field, separated by commas

Answer №1

Similar questions

When utilizing "Koa-Rewrite," an AssertionError occurs stating that app.use(rewrite) necessitates a generator function

Chrome experiences a temporary halt when attempting to load a webpage

Randomly choose one of 5 pages and insert an HTML element at different intervals using JavaScript, jQuery, MySQL, or PHP

Fresh to Angular: Understanding Calculated Variables

What are the steps to secure an API endpoint using PassportJS?

Unable to use setState on a component that is not mounted despite already calling componentDidMount

Exploring the properties of a file directory

Autocomplete Data Origin

Guide on replacing characters in Blogger using Javascript

Modify the information and return it to me

Substitute any text string starting with a colon, such as the route path in Express

Issues with padding in Bootstrap grid system

Sending Various Parameters to PHP API Function

I am trying to map through an array fetched from Firebase, but despite the array not being empty, nothing is displaying on the

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

Switching sub components based on routing through navigation links after logging in

Developing a model in NodeJS poses a challenge for me

Accessing values using keys in a Groovy name-value array

Ways to bring in external javascript files in reactjs

tracking scroll position within div on main page