Navigating arrays containing arrays/objects and updating properties in Angular using loops

My challenge involves an array containing arrays and objects. Within a function, I am attempting to assign a value to a specific property (for example, setting 'call' of $scope.companies[0].users to the value selected in a checkbox). Despite my research efforts, I have been unsuccessful in achieving this task and everything I have attempted so far has been incorrect. Any help would be greatly appreciated!


      <form action="" ng-click="change(key)">
        <input ng-model="key.call"type="checkbox"">Call
        <br>
        <input ng-model="key.person"type="checkbox" >Person
        <br>
        <input type="checkbox"ng-model="key.dial">Dial
        <br>
        <input type="checkbox" ng-model="key.voice">Voice          
    </form>

app.controller('appCtrl', function($scope) {
    $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
            firstName: 'Alex',
            lastName: 'D',
            number: 1234,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Sarah',
            lastName: 't',
            number: 14,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'J',
            lastName: 'd',
            number: 07,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }]
    }, {
        name: 'The Best Company Elegant',
        users: [{
            firstName: 'Alx',
            lastName: 'B',
            number: 1234,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Seth',
            lastName: 'w',
            number: 12,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'J.S',
            lastName: 'B',
            number: 7.
            call: '',
            person: '',
            dial: '',
            voice: ''
        }]
    }, {
        name: 'The Best Company by Julia',
        users: [{
            firstName: 'Aleddddx',
            lastName: 'l',
            number: 1234,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Maggy',
            lastName: 'n',
            number: 1,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Ja',
            lastName: 'Key',
            number: 123,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }]
    }]

    $scope.change = function(key) {
        for (var i = 0; i < $scope.companies[0].users; i++) {
            $scope.companies[0].users[i].call: key)
    }
}
});

Answer №1

Based on the aforementioned snippet, it appears that $scope.companies[0].users represents an array containing a length property indicating the number of elements it contains. To implement this in your code:

$scope.change = function(key) {
          for (var i = 0; i < $scope.companies[0].users.length; i++) {
              $scope.companies[0].users[i].call = key;
      }

If you wish to iterate through both companies and users, consider nesting two for loops: one to iterate over companies and another to go through users, following a similar approach as shown in the code above.

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

Model updating with the addition of an item and triggering a secondary ng-repeat for refreshing

As I was working on the phone tutorial, I found myself pondering how to implement a specific use case. The browser renders a list of phones. When the user clicks on add phone for one of these phones, the function addItem is triggered and adds that phone ...

Troubleshooting: Issues with Custom Image Loader in Next.js Export

I'm encountering a problem while attempting to build and export my Next.JS project. The issue lies with Image Optimization error during the export process. To address this, I have developed a custom loader by creating a file /services/imageLoader.js ...

Access and retrieve pkpass files from a server using React

I've exhausted all options but still can't get it to work. I'm attempting to create an Apple wallet pass using https://github.com/walletpass/pass-js. When I download the pass on the node server where I've implemented it, everything work ...

Distinct "namespaces" within HTML

Recently, I've encountered an issue with my application that is causing ID collisions. The application uses AJAX to dynamically load code snippets based on user demand. Although these snippets vary significantly, there are instances where a code snipp ...

What is causing ES6 Class properties to be concealed by Higher Order Functions?

UPDATE: Added new screenshots to provide clarity at the end. My current challenge involves utilizing high order functions to combine subclasses/mixins. I've noticed that I can only access properties from the first class I extend, and only properties ...

Tips for retrieving information from a dynamically created form using VUE?

Welcome Community I am working on a parent component that includes a child component. The child component dynamically renders a form with various controls from a JSON object retrieved via a Get request using Axios. My goal is to be able to read and loop ...

Inserting HTML content into a DIV with the help of jQuery

Looking for a solution with my index.html file. I want to load other HTML files into a DIV by clicking on buttons. Here's an example of what I'm trying to achieve: I've searched through various examples online, but none seem to work for ...

Modify the index in the creation of a json

I am trying to create a JSON object using the code below: var myJSONObject = []; var id = "1", value = "I'm a value !"; myJSONObject.push({id:value}); When I display this construction, it shows: [{"id":"I'm a value !"}] However, I want it to d ...

REACT Issue: Unable to Select Dropdown Option with OnChange Function

I have a component that includes a select element. Upon clicking an option, the OnProductChange function returns the value. However, my e.target.value shows as [Object Object]. Yet, {console.log(product)} displays: {id: 1, name: "VAM"} Clicking on Add L ...

Encountering an issue while trying to convert a JSON object into an array of a specific class type

When I receive a JSON object from a service, I want to iterate through this object and populate an array of class types. Below is the code used to call the service: public GetMapData(): Observable<Response> { var path = 'http://my.blog.net ...

Using i18next to alter language in a React app

Implementing the i18next translation system into my React app was a breeze thanks to a helpful guide I found. However, I'm facing an issue with changing the language manually. The guide covered the setup process perfectly, but lacked information on ho ...

Executing all middleware within an express route

Currently, I am in the process of constructing an API using express and have implemented multiple middleware functions in my routes. One of the endpoints I am working on is displayed below: Router.route('/:id/documents') .get([isAuthenticated, ...

Ways to terminate a NOHUP process for Node.js started through SSH

I have initiated a node.js server on port 3000 using nohup for background running, but now I need to stop the server on the same port and start it again. How can I stop the process? To identify the process in order to kill it, I can use this command: ps ...

Using JQuery, identify cells located in the first column of a table excluding those in the header section

In the past, I had code that looked like this: $(elem).parents('li').find(...) I used this code when elem was an item in a list, making it easy to reference all items in the list. But now, I've made some changes and decided to use a table ...

What is causing the jqplot meter gauge problem with the error message "c.jqplot is undefined

I'm encountering an issue and seeking some guidance. I am relatively new to this, so navigating the problem proves challenging. I'm attempting to utilize jqplot's meter gauge according to the documentation, but it doesn't seem to be fun ...

Ensure that the folder name contains specific characters

When working with AngularJS, I am developing a feature to create folders. One requirement is that if a folder name contains special characters like /, :, ?, "<", or |, an error message should be displayed stating "A folder name cannot contain any of the ...

Maximizing the potential of AFRAME animations: Tips for recycling your animations

Looking to create a unique and irregular animation, similar to the pattern of a waterdrop falling: Drip nothing Drip Drip Drip nothing nothing Is there a method to achieve this effect or loop an extended animation sequence of dripping? ...

Track every click on any hyperlink throughout the entire webpage

I am attempting to capture any click event on a link throughout the entire page. For example, when a user clicks on the following link: <a href="/abc">abc<a/> I want to be able to retrieve the anchor tag like so: <span hre="/abc">abc& ...

"Permission denied to access restricted URI" error encountered while attempting to utilize ng-template functionality

I am attempting to implement ng-include for recursive templates in my HTML. After testing it on jsfiddle and confirming that it works, I tried the same locally. However, I encountered the following error: Error: Access to restricted URI denied createHttpB ...

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...