When the array index is modified, ng-repeat will loop through the updated array element, such as array['1234']

Looking to implement a basic ng-repeat with an array where the index is adjusted based on specific requirements

 $scope.arr["123"] = { id: '123', name: 'ali', speed: '0' }
 &&
 $scope.arr["345"] = { id: '345', name: 'umar', speed: '1' }
 and so forth...

Since the length of the array in 0 ng-repeat does not provide the necessary information, I need to find an alternative for my .ejs file code:

               <div ng-repeat="items in arr">
                    <div class="col-sm-6 item two">
                        <div class="full-width-float multiviewbox-inner">
                            <div class="multiuser-status-up">
                                <span class="cn_item multi-cross">
                                   <i class="cross-toogle-black"></i>
                               </span>
                                <div class="float-left-left">
                                    <span class="badge user-act-mul"> 
                              {{items.name}}</span>
                                </div>

                            </div>
                            <div class="multiuser-status-down">
                                <div class="float-left-left">
                                    <span class="cn_item badge">
                                   <i class="sprite-weeklyicon iconweekly- 
                             2"></i>
                                  <span class="speed-multi-user">Speed <span 
                             class="text-primary">{{items.speed}} 
                              </span>kmph</span>
                                    </span>
                                </div>
                                <div class="float-right-right multimap- 
                                 fullscreen-on">
                                    <span class="cn_item badge">
                                   <i class="multimap-fullscreen"></i>
                               </span>
                                </div>
                         </div>
                     </div>
                  </div>

Answer №1

After seeing the feedback, it appears that you are attempting to loop through an array when arr is actually an object. If you're still encountering errors, it's likely because you haven't properly initialized arr.

Here's a functional sample code snippet for reference:

angular.module('app', [])
  .controller('Ctrl', ['$scope', ($scope) => {
    $scope.arr = {};
    $scope.arr["123"] = {
      id: '123',
      name: 'ali',
      speed: '0'
    };

    $scope.arr["345"] = {
      id: '345',
      name: 'umar',
      speed: '1'
    }
  }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app" ng-controller="Ctrl">
  <div ng-repeat="(key, items) in arr">
    <div class="col-sm-6 item two">
      <div class="full-width-float multiviewbox-inner">
        <div class="multiuser-status-up">
          <span class="cn_item multi-cross">
             <i class="cross-toogle-black"></i>
           </span>
          <div class="float-left-left">
            <span class="badge user-act-mul"> 
              {{items.name}}
            </span>
          </div>
        </div>
        <div class="multiuser-status-down">
          <div class="float-left-left">
            <span class="cn_item badge">
              <i class="sprite-weeklyicon iconweekly-2"></i>
            <span class="speed-multi-user">
              Speed
              <span class="text-primary">{{items.speed}} 
              </span>kmph</span>
            </span>
          </div>
          <div class="float-right-right multimap-fullscreen-on">
            <span class="cn_item badge">
              <i class="multimap-fullscreen"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

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

Alter the arrow to dynamically point towards the location of the click source

I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...

Exploring the nuances of useEffect() functionality and the impact of extra re-renders

I ran some tests using a dummy component and noticed an unusual pattern in the console output: Rendering: 0 Triggered: 0 Rendering: 4 Triggered: 4 Rendering: 4 I'm having trouble figuring out why this is happening. On the first render, the foll ...

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

Unable to display arrow D3 graph on SVG

I've been puzzling over this issue for quite some time... I have an SVG that is displaying nodes and links for a directed graph. However, the lines are not displaying arrows. Here is the troublesome code snippet for the arrow. While the nodes and lin ...

Changing the size of icons in an Alert using Material UI with React

Recently, Material UI unveiled the new 'Alert' component. Everything seems to be working well, except for the fact that I can't find a way to adjust the size of the icon. Here is my code snippet: <Snackbar open={true}> <Alert ...

Is it possible to use ng-src to point to a file stored locally?

I am currently experimenting with using ng-src to load images from a local folder, but I keep encountering 404 errors. Can ng-src actually reference a local folder, or do you always have to use a hardcoded path like http://example.com/imgs/{{work.img}}.jpg ...

Utilizing Node.js to match arrays

let items = ["Product",["car","Bike"]]; let result = items[1].map((item) => [items[0], item]); console.log(result); My current output is: [["Product" , "car"], ["Product" , "bike"]], The above code works for this simple output, but I'm unsure ho ...

Is it possible to create dynamic animations with SVG files?

I am currently in the process of coding my website, and I came up with an exciting idea to animate my navigation bar within an SVG container. With its naturally wavy design, I aim to achieve a sweeping wave effect similar to the intro animation on Discord. ...

Monitoring changes in screen size on Capacitor/Cordova application screens

One practical application is being able to detect split-screen and tablet fold scenarios when a Capacitor application is running. It appears that Android manages this through "configuration changes", but the Capacitor APIs do not seem to directly address t ...

Comparing the Efficiency and Practicality of Using a Single NSMutableArray versus Multiple C-arrays

Situation: My application involves a DAY structure that consists of three key variables: Date (NSString*), Temperature (float), and Rainfall (float). Problem: I need to graph a subset of around 5000 DAY structures on the screen of an iPhone device usi ...

Can the CSS style be determined manually through calculation?

Is there a way to calculate the final CSS style on an element manually (without rendering it)? Let's assume I have the following HTML structure: <p style="some_style1"> <span style="some_style2"> <span style="some_style3"> ...

Tips for importing data from Google Sheets to MongoDB Atlas Realm

I'm attempting to transfer my Google Sheets data to MongoDB Atlas. I've created the app script and function in the editor. However, when running the code in MongoDB's function editor, I encounter the ERROR "mongodb insert: argument must be a ...

What's the best way to showcase array values in JavaScript?

I am facing an issue where I am trying to display all values from the array "categories", but I keep getting [object object] or undefined. The problem seems to be occurring in the code within the last lines of the if statement, specifically when I try to ...

The toggleclass function in Jquery is not functioning properly

I've been struggling with my toggleclass function not working, and I'm at a loss as to why. Any assistance would be greatly appreciated! You can find the code on jsfiddle: http://jsfiddle.net/t763P/1460/ <li id="toggle-favicon"> <a ...

Is it considered best practice to call the same function within itself in a function?

function takeANumber() { let startHealth = parseInt(prompt("Please enter a positive number:")); // I am recursively calling the same function within an if block to ensure that the input is a valid number greater than zero. Is this considered good practic ...

Tips on extracting JSON array information from a URL

[{'Name':'John Smith','Age':34},{'Name':'shankar','Age':24}] When attempting to read JSON array data in C#, my code is not working as expected. Here is the code I have written: WebRequest reques ...

Retrieving information from AngularJS modal window

Seeking a solution to retrieve data FROM modal to invoking controller, as most examples only cover sending data TO the modal. What is the proper method for achieving this? Here is the form used within the modal: <form class="form-horizontal"> < ...

Is your dropdown menu malfunctioning with jQuery? (Chromium)

I am currently working on a website that requires the options in the second dropdown menu to change based on the selection made in the first dropdown menu. However, despite the fact that the browser is recognizing the javascript file, it doesn't seem ...

Retrieve the user without triggering a 401 error using the Express Passport + JWT middleware

I have integrated passport for authenticating calls to my express API. The setup is fairly standard: /* Passport Configuration */ const jwtOptions = { jwtFromRequest: ExtractJwt.fromAuthHeaderWithScheme('Bearer'), secretOrKey: config.au ...

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...